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>