트위터 부트 스트랩 그리드 시스템 - 4 span3의 결과가 2 라인입니다.

Question

트위터 부트 스트랩을 사용하고 있으며 컨테이너 내의 한 줄에 4 개의 섹션이 어떻게 작동하는지 알고 싶습니다. 트위터 부트 스트랩에 따르면 컨테이너 내에 12 개의 스팬이 있으므로 문제가되지 않아야합니다.

4 가지 div를 만들면 4 번째 div가 다음 줄로 이동합니다. 내 화면 너비가 수직으로 쌓아야하는 너비보다 커서 문제가되지 않습니다.

아이디어가 있으십니까? 여기

CSS

.howitworks{ 
     text-align: center; 
     margin-top: 30px; 
     } 

.howitworks p{ 
     margin-left:20%; 
     padding-bottom: 40px;} 

.howitworks h3{ 
     padding-top:25px; 
      } 

#howitworksdetail{ 
     border: thin solid #0d9e49; 
     border-bottom-width: 3px; 
     border-bottom: solid #0d9e49; 
     min-height: 220px; 
     margin-top: 60px; 
      } 

여기

<div class = "container"> 
<div class = "howitworks"> 
    <div class = 'span3', id= 'howitworksdetail'> 
    <h3 class = "text-center">header</h3> 
    <p class = "span2 text-center">stuff.</p> 
    </div> 
    <div class = 'span3', id= 'howitworksdetail'> 
    <h3 class = "text-center">header</h3> 
    <p class = "span2 text-center">stuff</p> 
    </div> 
    <div class = 'span3', id= 'howitworksdetail'> 
    <h3 class = "text-center">header</h3> 
    <p class = "span2 text-center">stuff</p> 
    </div> 
    <div class = 'span3', id= 'howitworksdetail'> 
    <h3 class = "text-center">header</h3> 
    <p class = "span2 text-center">stuff</p> 
    </div> 
</div> 
</div> 

나는 국경을 제거 시도하고 그 중 하나를하지 않았다 HTML. 감사합니다

Answer 1

코드에 <div class="row">이 누락 된 것 같습니다. Bootstrap Grid System 페이지에서 12 열로 행을 만들려면 클래스 row이 필요하다는 것을 알게됩니다.

또한 <p> 요소에는 span2 클래스가 있지만, <div> 요소에만 그리드 클래스를 적용하고 싶다고 생각합니다. 희망이 도움이!