五列引导布局而不更改网格大小答案

【问题标题】：Five Column Bootstrap Layout without changing Grid Size五列引导布局而不更改网格大小
【发布时间】：2016-03-25 15:31:55
【问题描述】：

所以我想创建一个五列布局，就像在这个模型中提供给我的那样：

five column layout mockup

这是我的问题：

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

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

所以...

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

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

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

干杯。

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3 drupal-7 drupal-modules

【解决方案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 4 - 5 columns

【讨论】：