bootstrap偏移不会覆盖

Question

我是新的引导程序，以前没有使用过它们的网格系统。我想使用完整格，并有一个DIV 1-5和一个8-12所以每个格COL-LG-5。

我试图不覆盖那里CSS很多，以保持它的干净，我似乎有一个问题浮法：左。据我可以从文档中知道我正确地使用系统，但它不工作，第二个div下降到下一行。

MY CODE

<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

你的错误是，你必须在一行中的两个不同的div .col-lg-5，你加入.col-lg-offset-7类到第二个（5 + 5 + 7 = 17）。但是，抵消类别应为.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>