bootstrap在左側跨度上留出額外餘量

我試圖在第四個跨度上添加Div和Div，它在底部有額外的餘量。bootstrap在左側跨度上留出額外餘量

第4個跨度位於底部，但沒有正確對齊。它比上面的填充更多。

Span4

這裏是我的代碼： -

<div class="row-fluid"> 
    <div class=span12> 
     <div class=span4> 
      <div style="background: url(img/background.jpg) center no-repeat"> 
       <h2>&nbsp;</h2> 
       <h2>&nbsp;</h2> 
       <h2>&nbsp;</h2> 
       <h2>&nbsp;</h2> 
      </div> 
     </div> 
     <div class="span4"> 
      <div style="background: url(img/background.jpg) center no-repeat"> 
       <h2>&nbsp;</h2> 
       <h2>&nbsp;</h2> 
       <h2>&nbsp;</h2> 
       <h2>&nbsp;</h2> 
      </div> 
     </div> 
     <div class="span4"> 
      <div style="background: url(img/background.jpg) center no-repeat"> 
       <h2>&nbsp;</h2> 
       <h2>&nbsp;</h2> 
       <h2>&nbsp;</h2> 
       <h2>&nbsp;</h2> 
      </div> 
     </div> 
     <div class="span4"> 
      <div style="background: url(img/background.jpg) center no-repeat"> 
       <h2>&nbsp;</h2> 
       <h2>&nbsp;</h2> 
       <h2>&nbsp;</h2> 
       <h2>&nbsp;</h2> 
      </div> 
     </div> 
    </div> 
</div>

來源

2013-09-10 john smith

您需要另一個<div class="row"></div在那裏，象下面這樣：

<div class="row-fluid"> 
    <div class=span12> 
    <div class="row"> <!-- Additional row HERE --> 
    <div class=span4> 
     <div style="background: url(img/background.jpg) center no-repeat"> 
      <h2>&nbsp;</h2> 
      <h2>&nbsp;</h2> 
      <h2>&nbsp;</h2> 
      <h2>&nbsp;</h2> 
     </div> 
    </div> 
    <div class="span4"> 
     <div style="background: url(img/background.jpg) center no-repeat"> 
      <h2>&nbsp;</h2> 
      <h2>&nbsp;</h2> 
      <h2>&nbsp;</h2> 
      <h2>&nbsp;</h2> 
     </div> 
    </div> 
    <div class="span4"> 
     <div style="background: url(img/background.jpg) center no-repeat"> 
      <h2>&nbsp;</h2> 
      <h2>&nbsp;</h2> 
      <h2>&nbsp;</h2> 
      <h2>&nbsp;</h2> 
     </div> 
    </div> 
    </div> 
    </div> 
    <div class=span12> 
    <div class="row"> <!-- Additional row HERE --> 
    <div class="span4"> 
     <div style="background: url(img/background.jpg) center no-repeat"> 
      <h2>&nbsp;</h2> 
      <h2>&nbsp;</h2> 
      <h2>&nbsp;</h2> 
      <h2>&nbsp;</h2> 
     </div> 
    </div> 
    </div> 
    </div> 
</div>

來源

2013-09-11 01:40:59

這不是我想要做的..我只想使用span4，我希望它自動對齊:( –

我認爲解決的辦法是

<div class="row-fluid"> 
    <div class=span12> 
    <div class=span4> 
     <div style="background: url(img/background.jpg) center no-repeat"> 
      <h2>&nbsp;</h2> 
      <h2>&nbsp;</h2> 
      <h2>&nbsp;</h2> 
      <h2>&nbsp;</h2> 
     </div> 
    </div> 
    <div class="span4"> 
     <div style="background: url(img/background.jpg) center no-repeat"> 
      <h2>&nbsp;</h2> 
      <h2>&nbsp;</h2> 
      <h2>&nbsp;</h2> 
      <h2>&nbsp;</h2> 
     </div> 
    </div> 
    <div class="span4"> 
     <div style="background: url(img/background.jpg) center no-repeat"> 
      <h2>&nbsp;</h2> 
      <h2>&nbsp;</h2> 
      <h2>&nbsp;</h2> 
      <h2>&nbsp;</h2> 
     </div> 
    </div> 
    </div> 
    <div class=span12> 
    <div class="span4"> 
     <div style="background: url(img/background.jpg) center no-repeat"> 
      <h2>&nbsp;</h2> 
      <h2>&nbsp;</h2> 
      <h2>&nbsp;</h2> 
      <h2>&nbsp;</h2> 
     </div> 
    </div> 
    </div> 
</div>

這一點，因爲你完成電網與3 span4，換句話說，3 * span4 = 12 然後，您需要創建一個帶有span12的新div容器，並且在此div內可以添加新的spanN，直到完成12個網格你懂了嗎？ :)

來源

2013-09-11 01:37:29

我不想每3 span4 –

遺憾後使用span12，是你能做到這一點的唯一方法。或者也許你需要

...

因爲，如果你使用span4，網格是他們的全寬3。 –

bootstrap在左側跨度上留出額外餘量

回答

相關問題