Twitter Bootstrap 2 - 全寬排

昨天我問了一個類似問題的問題，但看起來我需要做更多的工作。這就是我做的！Twitter Bootstrap 2 - 全寬排

我有我的基本3列布局（都是這樣，不完全是我想要它。左，右列是流體，而不是固定寬度）。

問題是「行流體」DIV不會佔據屏幕的整個寬度，或者它是父容器，它不會拉伸寬度。

編輯左右兩列均以固定寬度完美坐着，但現在中間的列不會填滿右側列。

HTML：

<div class="container-full">  
    <div class="navbar navbar-static-top"> 
     <div class="navbar-inner blue-bg"> 
      <a href="#" class="brand"><img src="images/kab/logo-header.png" alt="KAB Logo Large"/></a> 
     </div> 
    </div> 

    <div class="container-full">  
     <div class="row"> 

      <div class="span1 blue-bg" style="width: 150px;"> 
       <h4>Left Column</h4> 
      </div> 

      <div class="span10"> 
       <h4>Center Content</h4> 
      </div> 

      <div class="span1 right blue-bg" style="width: 150px;"> 
       <h4>Right Column</h4> 
      </div> 
     </div> 
    </div> 

    <div class="navbar navbar-fixed-bottom"> 
     <div class="navbar-inner blue-bg" style="height: 77px;"> </div> 
    </div> 
</div>

CSS：

.container-full { 
     margin: 0 auto; 
     width: 100%; 
    } 

    .full { 
      margin: 0 auto; 
      width: 100%; 
    }

編輯：代碼更新，以反映更改。

來源

2014-01-05 Steve_M

大概好，何況你正在使用的引導版本。 – Richard

我想你使用引導2，如果你想全寬使用行而不是行流暢 –

@richard謝謝 - 它的Twitter引導2 –

解決！不幸的是，我不得不編輯bootstrap.css，因爲它總是設置餘量，而不管我做了什麼。我確信有這樣一個方法。

溶液下面允許固定 - 流體 - 固定3欄佈局

HTML：

<div class="container-full"> 
    <div class="row">   
     <div class="span1" style="width: 150px;"> 
      <h4>Left</h4> 
     </div> 

     <div class="span10 filler"> 
      <h4>Center Content</h4> 
     </div> 

     <div class="span1" style="width: 150px;"> 
      <h4>Right</h4> 
     </div> 
    </div>  
    </div>

CSS：

.filler { 
     width: -moz-calc(100% - 300px); /* Firefox */ 
     width: -webkit-calc(100% - 300px); /* WebKit */ 
     width: -o-calc(100% - 300px); /* Opera */ 
     width: calc(100% - 300px); /* Standard */ 
    }

的-300px值等於總和固定列的寬度，在這種情況下是150px。

現在，在bootstrap.css轉到第282行([class*="span"])並將margin-left從20px更改爲0px。

那就是它！爲我工作。我必須注意到，這隻適用於CSS3，因爲CSS中使用了calc。

來源

2014-01-05 18:45:32

爲我工作而不會破壞線路。只需添加樣式「margin-left：0px！important;」在每個div你需要破解 –

使用Bootstrap 2.x，您不需要「container-full」類。 Bootstrap 2.x具有用於流體佈局（全寬）的「容器流體」類。

您可以將「容器流體」和「排液」結合起來用於預期結果。

<body> 
    <div class = "container-fluid"> 
     <div class = "row-fluid">  
     <div class="span1" style ="width: 150px;"> 
      <h4>Left</h4> 
     </div> 

     <div class="span10"> 
      <h4>Center Content</h4> 
     </div> 

     <div class="span1" style="width: 150px;"> 
      <h4>Right</h4> 
     </div> 
     </div> 
    </div>

來源

2014-01-06 14:42:51 Gonzalo

Twitter Bootstrap 2 - 全寬排

回答

相關問題