부트 스트랩 3 그리드 시스템

Question

부트 스트랩 2에서 부트 스트랩 3으로 광산 프로젝트를 이전 중입니다. 이해할 수없는 그리드 레이아웃에 문제가 있습니다. 나는 col-md-12가 있고이 더 큰 div에 3 개의 동일한 폭의 열을 추가하고 싶습니다. 논리적으로 3 열은 각각 col-md-4이어야합니다. 그러나 col-md-4 클래스의 3 열 (divs)을 추가하면 두 열이 맞지 않으며 그 중 하나가 아래로 밀려나고 두 번째 열 뒤에 끝에 약간의 공백이 남습니다. 제가 누락 된 부분을 이해하도록 도와주십시오. 고맙습니다.

Answer 1

문제가있는 것처럼 들리 네요. 부트 스트랩은 col-xx-# 클래스를 중첩 할 때 패딩을 자동으로 추가합니다. col-md-4이 col-md-12 부트 스트랩의 직계 하위 항목 인 경우 패딩이 추가되고 세 번째 col-md-4은 새 행으로 끝납니다.

무슨 일을하는지 :

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="col-md-4"> 
       1/3 
      </div> 
      <div class="col-md-4"> 
       2/3 
      </div> 
      <div class="col-md-4"> 
       3/3 
      </div> 
     </div> 
    </div> 
</div> 

는이 문제를 해결, 중 추가 새로운 class="row"을 첫 번째 col-md-4 위 또는 단순히이 같은 col-md-12 제거하려면 :

<div class="container"> 
    <div class="row"> 
     <div class="col-md-4"> 
      1/3 
     </div> 
     <div class="col-md-4"> 
      2/3 
     </div> 
     <div class="col-md-4"> 
      3/3 
     </div> 
    </div> 
</div> 

Answer 2

부트 스트랩의 열 레이아웃은 너비가 12 "단위"일 수 있습니다.

동일한 너비의 열을 얻으려면 12를 균등하게 분할해야합니다 (col-md- *의 합계 *는 12 여야 함).