오버라이드가없는 부트 스트랩 오프셋.

Question

부트 스트랩에 새로 추가되어 그리드 시스템을 사용하지 않았습니다. 나는 전체 그리드를 사용하여 하나 개의 사업부를하려고 1-5 및 8-12 한 각각의 사업부 COL-LG-5.

내가 깨끗하게 유지하려고 CSS를 무시하지 않으려 고 시도한 결과, float :의 문제가있는 것으로 보입니다. 늘어나는만큼 내가 제대로 시스템을 사용하고 있지만 그 작동하지 않는 설명서에서 말할 수있는, 두 번째 div 다음 줄을 삭제합니다.

MY 코드

<div class="row"> 
      <div class="col-xs-6 col-lg-5 well well-lg"> 
       <h2>Heading</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="col-xs-6 col-lg-5 col-lg-offset-7 well well-lg"> 
       <h2>Heading</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> 

Answer 1

귀하의 실수는 당신이 한 행에 두 개의 서로 다른 .col-lg-5 된 div를 가지고있다, 당신은 두 번째 (5 + 5 + 7 = 17)에 .col-lg-offset-7 클래스를 추가했다. 그러나 오프셋 클래스는 .col-lg-offset-2이어야하며 12 열 그리드 시스템을 초과하면 안됩니다. 여기

<div class="row"> 
    <div class="col-xs-6 col-lg-5 well well-lg"> 
     <h2>Heading</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="col-xs-6 col-lg-5 col-lg-offset-2 well well-lg"> 
     <h2>Heading</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 class="row"> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> 
</div> 

<div class="row"> 
    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> 
    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> 
</div> 

<div class="row"> 
    <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> 
</div>