트위터 부트 스트랩 스팬과 로우를 이해하지 못합니다.

Question

저는 960 명의 그리드 시스템 사용자였습니다. Twitter Bootstrap을 시도했지만 어리석은 질문 일 수 있습니다. 나는 스팬과 행을 이해하지 못합니다.

그래서 내가 그 안에 스팬을 컨테이너를 생성하고, 생성 할 때, 제대로 서로 옆에 맞지 않는 내 문제 : 960gs에

처럼 난 다음 작성하는 경우

<div class="container_12"> 
    <div class="grid_4"></div> 
    <div class="grid_4"></div> 
    <div class="grid_4"></div> 
</div> 

나는 완벽한 3 열을 서로 나란히 놓는다.

하지만 트위터 부트 스트랩으로는이 작업을 수행 할 수 없습니다. 내가하는 일과 관계없이 필자는 항상 불균형 컬럼으로 끝납니다. 따라서 컬럼은 960gs와 같이 컨테이너를 채우지 않습니다. 3 열을 배치하면 오른쪽 여백이 정확하지 않거나 컨테이너에 올바르게 맞지 않습니다.

부트 스트랩 예 :

<div class="container"> 
    <div class="row"> 
     <div class="span4"> 
      <h2>Column one</h2> 
      <p> 
       Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
      </p> 
     </div> 
     <div class="span4"> 
      <h2>Column one</h2> 
      <p> 
       Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
      </p> 
     </div> 
     <div class="span4"> 
      <h2>Column one</h2> 
      <p> 
       Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
      </p> 
     </div> 
    </div> 
</div> 

그래서 위의 예에서, 내가 불균형 열이 결국은, 왼쪽 첫 번째 열에 더 여유가 없다. 그리드 클래스와 함께 960g에서 이렇게하면 완벽합니다.

내 문제의 원인이되는 960g와 비교했을 때 Twitter의 부트 스트랩과 다른 점은 무엇입니까?

Answer 1

이유 :

• 컨테이너 940px
• 행은 20 픽셀 마진와 -20px 마진
• span4 300 픽셀과 960이다

화면 폭 <이다 = 940px, 행에서 20px 및 span4에서 20px 여백이 서로 상쇄되므로 첫 번째 span4에 왼쪽 여백이 없습니다.

'트위터 부트 스트랩'솔루션 :

하는 부트 스트랩-responsive.css을 추가하고 화면이 980 픽셀에서와 768px 넘어 때

이

용기 724px, 행 744px 및 span4 228px하는 유지 될 첫 번째 span4에서 왼쪽 여백.