五列 Bootstrap 不改变网格大小的布局

Question

所以我想创建一个五列布局，如该模型中提供给我的：

five column layout mockup

所以这是我的问题：

我知道我可以将整个网格更改为可以被 5 整除的数字并创建新列类。

但是...这不是一个选项，因为我们已经构建的大部分内容都是基于 12 列网格。

所以...

如何创建 5 列布局，网格系统固定为 12？

这是在 Drupal 7 的面板模块中完成的，我们使用 bootstrap 类来提供布局。但我想知道我是否有一个覆盖 bootstrap 样式的样式表，并创建我自己的样式表，但如果可以的话，我更愿意使用 bootstrap。

感谢您的帮助、意见和建议。

干杯。

Answer 1

您将使用 Bootstrap 列偏移量。您实际上会使用 12 列单元中的 10 列，然后像这样偏移最左边的第一列：

<div class="container-fluid">
    <div class="row">
          <div class="col-sm-2 col-sm-offset-1">
            ..
          </div>
          <div class="col-sm-2">
            ..
          </div>
          <div class="col-sm-2">
            ..
          </div>
          <div class="col-sm-2">
            ..
          </div>
          <div class="col-sm-2">
            ..
          </div>
     </div>  
</div>

http://www.bootply.com/GtXXrcUa5Q

this answer

中介绍了用于获取五列布局的其他选项

五列 Bootstrap 不改变网格大小的布局

Five Column Bootstrap Layout without changing Grid Size

css

drupal-7

twitter-bootstrap

drupal-modules

twitter-bootstrap-3