如何将列的宽度调整为相等，而不是在使用Twitter Bootstrap模板时应用网格系统

Question

我有Twitter的引导模板，试图调整(宽度(动态列(列数从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类将(.col-lg-3(添加到div标记中，以从左到右跨越整个页面，形成4列。第五列位于第一列的下方。如果我使用(.col-lg-2(，我只使用12个网格中的10个。

我想知道是有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

Bootstrap依赖于12列网格，平均分布5列需要更改网格结构(通过更改较少的文件(。在3-12个范围内，你会得到大量的基本列。

一种更简单的方法是使用样式在元素上内联设置宽度，并计算要放入的宽度(例如，5列=100%/5=20%等(

或者，您可以定义自己的自定义类，并将它们添加到引导css之后。请注意，您还必须考虑bootstrap添加的填充和其他样式。一个简单的方法是，除了使用列类之外，只使用引导列类。

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

带有CSS

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

Fiddle-http://jsfiddle.net/qdv7xedh/