개인 포트폴리오 페이지 - 부트 스트랩 그리드 레이아웃

https://codepen.io/shaan046/pen/vWmVNY 개인 포트폴리오 페이지 - 부트 스트랩 그리드 레이아웃

HTML 코드로 빨려 :

<body> 
    <div id="header" class="row"> 
    <div class="col-md-1 col-lg-1"><h3 id="myText">Shantanu Tomar</h3</div> 
     <div class="col-md-offset-5 col-md-2 col-lg-offset-5 col-lg-2"><button class="btn btn-primary">Button1</button></div> 
     <div class="col-md-2 col-lg-2"><button class="btn">Button2</button></div> 
     <div class="col-md-2 col-lg-2"><button class="btn">Button3</button></div> 
     </div> 
    </body> 
</html>

CSS 코드

#header{ 
    background-color:red; 
}

JS 코드 :

$(document).ready(function() { 
    $("body").addClass("container-fluid"); 

});

내가 원하는 것은 "Shantanu Tomar"텍스트와 화면의 3 개 버튼이 div #header의 한 줄에 있어야한다는 것입니다. Bootstrap3을 사용하고 있습니다. 휴대 전화, 태블릿, 노트북에서 웹 페이지가 올바르게 보이도록 col-- 태그를 어떻게 제공 할 수 있는지 잘 모르십니까? lg 및 md 클래스를 사용했지만 버튼의 텍스트가 "Shantanu Tomar"로되어 있지 않습니다.

도움을 주셔서 감사합니다.

출처

2017-11-13 Shantanu Tomar

검사 해결이 codepen https://codepen.io/anon/pen/KymJYx 내가 시도 – Znaneswar

<div id="header" class="row"> 
 
    <ul class="list-inline"> 
 
    <li><button class="btn btn-primary">Button1</button></li> 
 
    <li><button class="btn btn-primary">Button2</button></li> 
 
    <li><button class="btn btn-primary">Button3</button></li> 
 
    </ul> 
 
</div>

는 다음과 같이하십시오. 및 W3 스쿨 https://www.w3schools.com/bootstrap/

<html> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<body> 
 
    <div id="header" class="row"> 
 
    <div class="col-md-12 col-lg-12"> 
 
     <div class="col-md-3 col-lg-3"> 
 
     <h3 id="myText">Shantanu Tomar</h3></div> 
 
     <div class=" col-md-2 col-lg-2"><button class="btn btn-primary">Button1</button></div> 
 
     <div class="col-md-2 col-lg-2"><button class="btn">Button2</button></div> 
 
     <div class="col-md-2 col-lg-2"><button class="btn">Button3</button></div> 
 
     </div> 
 
    </body> 
 
</html>

에서 부트 스트랩을 배울

출처

2017-11-13 08:19:20 Znaneswar

나는 그것의 동일한 시도했다. 사실 내가 여기서 확신하지 못하는 이유는 col-md-12와 col-lg-12로 div를 지정 한 이유입니다. 기본적으로, 우리는 12로 설정하고 우리의 편의에 따라 12 열 중에서 확장 할 수 있습니다. 내가 틀렸다면 나를 바로 잡아 주시겠습니까? –

check codepen https://codepen.io/anon/pen/KymJYx – Znaneswar

고마워 .. 그게 효과가있어 :) 그러나 나는 왜 내가 왜 다른 div를 만들어야하는지 이해하지 못한다. 기본적으로 12입니까? –

요소가 단일 행에 있어야하고 여기에 jquery가 필요없는 경우 col-xs-3(네 개의 요소가 있으므로)을 사용하면됩니다.

#header { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div id="header" class="row"> 
 
    <div class="col-xs-3"> 
 
     <h3 id="myText">Shantanu Tomar</h3> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
     <button class="btn btn-primary">Button1</button> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
     <button class="btn">Button2</button> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
     <button class="btn">Button3</button> 
 
    </div> 
 
    </div> 
 
</div>

출처

2017-11-13 08:15:05 Swellar

하지만. xs는 전화 장치 용이라고 생각합니다. 노트북에서 보는 경우 lg 및 md와 같은 다른 태그가있는 것처럼 올바른 방식으로 렌더링되지 않습니다. –

'xs '를 사용하면 가능한 가장 낮은 너비부터 가능한 가장 높은 너비까지 시작하여 항상 12 개의 열이 있습니다. 나는 당신에 대해 모른다. 그러나 내 컴퓨터에서 일하고있다. 여전히 한 줄로되어있다. – Swellar

^반드시 12 열이 아닌 * 3 열이 있어야한다. – Swellar

-2

은 왜 <ul>를 사용하지 않는? 이 같은

뭔가 :

출처

2017-11-13 08:16:01 bep42

답장을 보내 주셔서 감사합니다. 부트 스트랩 그리드 레이아웃 접근 방식을 사용하고 싶습니다. –

개인 포트폴리오 페이지 - 부트 스트랩 그리드 레이아웃

답변

관련 문제