twitter bootstrap流體佈局3列

虛假問題的藉口。我需要使用twitter bootstrap創建3個流體列布局。第一欄是頁寬的45％，第二欄是10％第三欄應該是頁寬的45％。twitter bootstrap流體佈局3列

我已經試過這樣：

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span5"> 
      <table class="table table-bordered"> 
       <thead> 
       <tr> 
        <th>#</th> 
        <th>First Name</th> 
        <th>Last Name</th> 
        <th>Username</th> 
       </tr> 
       </thead> 
       <tbody> 
       <tr> 
        <td>2</td> 
        <td>Jacob</td> 
        <td>Thornton</td> 
        <td>@fat</td> 
       </tr> 
       <tr> 
        <td>3</td> 
        <td colspan="2">Larry the Bird</td> 
        <td>@twitter</td> 
       </tr> 
       </tbody> 
      </table> 
     </div> 
     <div class="span2"></div> 
     <div class="span5"> 
      <table class="table table-bordered"> 
       <thead> 
       <tr> 
        <th>#</th> 
        <th>First Name</th> 
        <th>Last Name</th> 
        <th>Username</th> 
       </tr> 
       </thead> 
       <tbody> 
       <tr> 
        <td>2</td> 
        <td>Jacob</td> 
        <td>Thornton</td> 
        <td>@fat</td> 
       </tr> 
       <tr> 
        <td>3</td> 
        <td colspan="2">Larry the Bird</td> 
        <td>@twitter</td> 
       </tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
</div>

但中間一列是太寬，它不是屏幕寬度的10％。請幫助我在twitter引導中獲得流體佈局的ide。

來源

2012-09-23 Sergey

在Twitter Bootstrap與12列流體佈局span2有width: 14.5299%和span5有width: 40.1709%。

這是將介質寬度分成12列和其排水槽的結果。

如果你需要一個diferent分佈，你可以在這裏定製您的佈局：http://twitter.github.com/bootstrap/customize.html

來源

2012-09-23 11:10:16 albertedevigo

我看過這個網頁，但我不明白如何打破這些列45/10/45。我已經打開生成的bootstrap.css文件，並查看硬編碼像素值.spanXX寬度 – Sergey

固定佈局和流體佈局的百分比值有像素值。 – albertedevigo

對不起，好像我很笨。 http://twitter.github.com/bootstrap/customize.html#components - 默認情況下在列寬度的變量中固定了px值。我必須輸入45％而不是整數嗎？ – Sergey

如果你需要比，只是從12列改變BS網格系統20列。然後使用span9，span2，span9。

但是，這不會完全45/10/45百分比。由於BS有排水溝...

來源

2013-07-15 09:52:20 Olivier

twitter bootstrap流體佈局3列

回答

相關問題