如何在使用Twitter Bootstrap模板時調整列的寬度而不是應用網格系統。

Question

我有推特的引導模板，試圖證明（寬度）動態列（列數從3-12變化）。例如，5列頁面如何在12個網格系統中利用從邊到邊的整個屏幕寬度均勻展開。

<?php 
    $num_col = 5; // this value varies (fetched from database) as per user selection 
    ?> 

    <div class="row"><br /> 

    <?php 
    //Running a for loop to generate coloumns. 
    for($i = 0; $i<$num_col; $i++){ 
    ?> 
     <div class="col-lg-3"> 
      <section class="panel"> 
       <div class="panel-body">Dynamic Text</div> 
      </section> 
     </div> 
    <?php 
    } 
    ?> 
</div> 

例如Bootstrap類將div標籤（.col-lg-3）添加到div標籤以跨越整個頁面，從左到右製作4列。第五列坐在第一列下方。如果我爲此使用（.col-lg-2），我只利用了12個網格中的12個。

我想知道是否有3列或12列，動態可能的方式以相同的寬度在屏幕上進行調整。

.row { 
    margin-right: -15px; 
    margin-left: -15px; 
} 

.col-lg-3 { 
    position: relative; 
    min-height: 1px; 
    padding-right: 15px; 
    padding-left: 15px; 
} 

.col-lg-3 { 
    float: left; 
    } 

.col-lg-3 { 
    width: 25%; 
    } 

Answer 1

引導程序依賴於12列網格並平均分配5列需要您更改網格結構（通過更改較少的文件）。投入3-12個範圍，你將主要結束了大量的基礎列。

更簡單的方法將是使用樣式來設置元件上的寬度內聯，並計算寬度把在（例如5列= 100％/ 5 = 20％，等等）

或者你可以定義你自己的自定義類並在引導CSS後添加它們。請注意，您還必須考慮引導程序添加的填充和其他樣式。一個簡單的方法是除了你的列類以外，只使用引導列類。

<div class="col-xs-1 my-by-5"></div> 

與CSS

.my-by-5 { 
    width: 20%; 
} 

小提琴 - http://jsfiddle.net/qdv7xedh/