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

Question

我有 Twitter 的 Bootstrap 模板，试图证明(宽度)动态列(列数从 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>

例如，将 (.col-lg-3) 添加到 div 标记的 Bootstrap 类从左到右横跨整个页面，形成 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 列将需要您更改网格结构(通过更改 less 文件)。放入 3 - 12 个范围，您最终会得到大量基列。

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

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

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

使用 CSS

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

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