twitter bootstrap 中的五个相等的列
Posted
技术标签:
【中文标题】twitter bootstrap 中的五个相等的列【英文标题】：Five equal columns in twitter bootstrap 【发布时间】：2012-05-10 09:24:42 【问题描述】：我想在我正在构建的页面上有 5 个相等的列，但我似乎无法理解这里是如何使用 5 列网格的： http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/responsive
上面演示的五列网格是 twitter bootstrap 框架的一部分吗？
【问题讨论】：
您正在查看一个非常旧版本的引导程序。您是否希望在（我希望是最新的）引导程序上有一个 5 列的“响应式”网格？ 我刚刚意识到。声明的是 v1.3.0，当前是 2.0.2。最新版本是 12 列网格，这意味着我可以有 2、3、4 和 6 个相等的列.我要问的是，是否可以有 5 个相等的列而不必更改很多东西。 你可以，是的，但它需要对一些网格元素和响应式网格元素进行大量修改。您的网站是否完全响应？那样想出答案会容易一些，否则代码会很多。 是的，该网站是响应式的，但我也必须修改网格元素，而不是仅恕我直言的响应部分。 我在 .container.one-fifth.column width:17%; 方面取得了一些成功* 虽然我期待一些可怕的东西让我屏住呼吸。17.87847%。 【参考方案1】：对于引导程序 4
Bootstrap 4 现在默认使用 flexbox，因此您可以直接使用它的神奇力量。查看auto layout columns，它根据嵌套的列数动态调整宽度。
这是一个例子：
<div class="row">
<div class="col">
1 of 5
</div>
<div class="col">
2 of 5
</div>
<div class="col">
3 of 5
</div>
<div class="col">
4 of 5
</div>
<div class="col">
5 of 5
</div>
</div>
WORKING DEMO
对于引导程序 3
使用 Twitter Bootstrap 创建了一个奇妙的全宽 5 列布局here。
这是迄今为止最先进的解决方案，因为它与 Bootstrap 3 无缝协作。它允许您一次又一次地重复使用这些类，并与当前的 Bootstrap 类配对以进行响应式设计。
CSS：
将此添加到您的全局样式表中，甚至添加到您的 bootstrap.css 文档的底部。
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
.col-xs-5ths
width: 20%;
float: left;
@media (min-width: 768px)
.col-sm-5ths
width: 20%;
float: left;
@media (min-width: 992px)
.col-md-5ths
width: 20%;
float: left;
@media (min-width: 1200px)
.col-lg-5ths
width: 20%;
float: left;
使用它！例如，如果你想创建一个 div 元素，它在中型屏幕上表现得像五列布局，在小屏幕上像两列一样，你只需要使用这样的东西：
<div class="row">
<div class="col-md-5ths col-xs-6">
...
</div>
</div>
WORKING DEMO - 展开框架以查看列响应。
ANOTHER DEMO - 将新的col-*-5ths 类与col-*-3 和col-*-2 等其他类合并。调整框架大小以在响应式视图中看到它们全部更改为 col-xs-6。
【讨论】：
称他们为col-*-15 可能会令人困惑。这似乎暗示它们是 15 列网格系统的一部分，但它们不是。
@PaulD.Waite - 我在回答中添加了一个小注释，让人们知道。
col-*-15 对我来说很好，但col-*-5ths 可能是一个稍微不那么容易混淆的列名。这就是我正在使用的东西，这样我的其他开发人员就不会对我感到困惑。
嘿@scragar - 如果您查看所有 Bootstrap 当前列类的样式，您会注意到它们都包含position:relative; min-height: 1px; padding-right: 15px; padding-left: 15px;。基本上，我发布的代码只是对此进行了扩展，以便它们完全匹配 Bootstrap 的内置样式。然后我应用 20% 的宽度，以便 5 个相等的列可以适合整个页面。很简单:)
如何命名 2/5 列？或者我们应该使用：col-md-1ths for 1/5 and col-md-2ths for 2/5, col-md-5ths for 5/5 = full width ?【参考方案2】：
使用五个具有 span2 类的 div，并给第一个类指定 offset1。
<div class="row-fluid">
<div class="span2 offset1"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
</div>
瞧！ 五个等距且居中的列。
在 bootstrap 3.0 中，此代码如下所示
<div class="row">
<div class="col-md-2 col-md-offset-1"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
更新
由于 bootstrap 4.0 默认使用 Flexbox：
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
【讨论】：
它不会全宽。不过很好 我发布的解决方案是全宽并创建 5 个相等的列：HERE IS THE ANSWER。 不像@fizzix 在下面提供的答案那样全宽。在两侧产生不需要的边距，就像这样 - jsfiddle.net/wdo8L1ww 对于那些在 bootstrap 3 中使用 less/sass 的人，请查看 @lightswitch05 answer Bootstrap 4 5 列（全角）不需要 CSS 或 SASS：***.com/a/42226652/171456【参考方案3】：对于 Bootstrap 3，如果你想要 full-width 并且正在使用 LESS、SASS 或类似的东西，你所要做的就是使用Bootstrap's mixin functionsmake-md-column、make-sm-column 等。
少：
.col-lg-2-4
.make-lg-column(2.4)
.col-md-2-4
.make-md-column(2.4)
.col-sm-2-4
.make-sm-column(2.4)
SASS：
.col-lg-2-4
@include make-lg-column(2.4)
.col-md-2-4
@include make-md-column(2.4)
.col-sm-2-4
@include make-sm-column(2.4)
您不仅可以使用这些 mixin 构建真正的全角引导列类，还可以构建所有相关的帮助类，例如.col-md-push-*、@987654330 @ 和.col-md-offset-*：
少：
.col-md-push-2-4
.make-md-column-push(2.4)
.col-md-pull-2-4
.make-md-column-pull(2.4)
.col-md-offset-2-4
.make-md-column-offset(2.4)
SASS：
.col-md-push-2-4
@include make-md-column-push(2.4)
.col-md-pull-2-4
@include make-md-column-pull(2.4)
.col-md-offset-2-4
@include make-md-column-offset(2.4)
其他答案谈论设置@gridColumns 这是完全有效的，但这会改变所有引导程序的核心列宽。使用上述 mixin 函数将在默认引导列的顶部添加 5 列布局，因此不会破坏任何 3rd 方工具或现有样式。
【讨论】：
最干净的解决方案，因为2.4 是 12 的第 5 (2.4*5=12)，适用于 12 列网格中的 Bootstrap 3。也适用于make-xs、make-sm，但不能与其他标准 col 定义结合使用（最新获取优先级）
我对这个答案的赞成票相对较少感到震惊。到目前为止，它是最简单的，不仅使用与其他 Bootstrap 列类相同的命名约定，而且还使用 Bootstrap 用于创建自己的列的相同 mixins，至少在 Bootstrap 4 之前它可能是面向未来的。跨度>
这应该是最好的答案。我基于此创建了一个库（包括offset、pull 和push）供我自己使用。随时check it out
正如大家所说，是的，这就是现在的正确答案。 @Sherbrow 说他们“不会与其他标准 col 定义结合使用”，但这并不是因为这个解决方案在某种程度上是错误的，而仅仅是因为 12%5 != 0。
@lightswitch05 不幸的是，这不适合我，因为我有动态数量的列。如果我只有一列，我仍然希望它是屏幕的第五个，但使用 Fizzix 的答案，一列将覆盖整个屏幕。我设法使用新的 Bootstrap 4 mixin 函数解决了这个问题。如果您愿意，我可以更新您的答案以包含此内容？【参考方案4】：
2019 年更新
引导 4.1+
这里有 5 个相等的全宽列（没有额外的 CSS 或 SASS），使用 auto-layout grid：
<div class="container-fluid">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
</div>
</div>
http://codeply.com/go/MJTglTsq9h
此解决方案有效，因为 Bootstrap 4 现在是 flexbox。您可以每 5 列使用 <div class="col-12"></div> 或 <div class="w-100"></div> 等分隔符将 5 列换行在同一 .row 内。
另见：Bootstrap - 5 column layout
【讨论】：
等不及要稳定了:) 很好，但仅适用于 5 个元素的行。如果你得到更多你就错了。在这里查看我的增强小提琴：jsfiddle.net/djibe89/ntq8h910 这就是为什么我解释你必须每 5 列使用中断。您的解决方案有效，但需要额外的 CSS。 还可以考虑将flex-nowrap 添加到.row，因为（自动）列可能会超出父级宽度。【参考方案5】：
下面是@machineaddict 和@Mafnah 答案的组合，为 Bootstrap 3 重新编写（到目前为止对我来说效果很好）：
@media (min-width: 768px)
.fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2
width: 20%;
*width: 20%;
@media (min-width: 1200px)
.fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2
width: 20%;
*width: 20%;
@media (min-width: 768px) and (max-width: 979px)
.fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2
width: 20%;
*width: 20%;
【讨论】：
我应该把它放在哪里以及如何使用它？ @Serg 1. 将其放在 Bootstrap css 文件下方/之后 2. 将 .fivecolumns 类添加到 .row，然后使用 .col[,-sm,-lg] 类嵌套五列-2 在某些情况下不能达到完美的全宽。 为什么 col-xs-2 没有添加到声明中？ @ganders 只是一瞥；在此页面上查看另一个答案：***.com/questions/10387740/…【参考方案6】：保留原始引导程序的 12 列，不要自定义它。您需要进行的唯一修改是在 原始引导响应 css 之后进行一些 css，如下所示：
以下代码已针对 Bootstrap 2.3.2 进行了测试：
<style type="text/css">
/* start of modification for 5 columns */
@media (min-width: 768px)
.fivecolumns .span2
width: 18.297872340425532%;
*width: 18.2234042553191494%;
@media (min-width: 1200px)
.fivecolumns .span2
width: 17.9487179487179488%;
*width: 17.87424986361156592%;
@media (min-width: 768px) and (max-width: 979px)
.fivecolumns .span2
width: 17.79005524861878448%;
*width: 17.7155871635124022%;
/* end of modification for 5 columns */
</style>
还有html：
<div class="row-fluid fivecolumns">
<div class="span2">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span2">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span2">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span2">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span2">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
注意：尽管 span2 乘以 5 不等于 12 列，但您明白了 :)
可以在这里找到一个工作示例http://jsfiddle.net/v3Uy5/6/
【讨论】：
【参考方案7】：如果您不需要 精确 相同宽度的列，您可以尝试使用嵌套创建 5 列：
<div class="container">
<div class="row">
<div class="col-xs-5">
<div class="row">
<div class="col-xs-6 column">Column 1</div>
<div class="col-xs-6 column">Column 2</div>
</div>
</div>
<div class="col-xs-7">
<div class="row">
<div class="col-xs-4 column">Column 3</div>
<div class="col-xs-4 column">Column 4</div>
<div class="col-xs-4 column">Column 5</div>
</div>
</div>
</div>
</div>
jsfiddle
前两列的宽度将等于 5/12 * 1/2 ~ 20.83%
最后三列：7/12 * 1/3 ~ 19.44%
这种 hack 在很多情况下都可以得到可接受的结果，并且不需要任何 CSS 更改（我们只使用本机引导类）。
【讨论】：
【参考方案8】：为 5 列布局创建自定义 Bootstrap 下载
进入Bootstrap 2.3.2（或Bootstrap 3）自定义页面，设置以下变量（不要输入分号）：
@gridColumns: 5;
@gridColumnWidth: 172px;
@gridColumnWidth1200: 210px;
@gridColumnWidth768: 128px;
@gridGutterWidth768: 21px;
下载您的构建。这个网格将适合默认容器，保留默认的装订线宽度（几乎）。
注意：如果您使用的是 LESS，请改为更新 variables.less。
【讨论】：
【参考方案9】：带有弹性框http://output.jsbin.com/juziwu
.flexrow
display: flex;
background: lightgray; /*for debug*/
.flexrow > *
flex: 1;
margin: 1em;
outline: auto green;
<div class="flexrow">
<div>...</div>
<div>...</div>
<div>...</div>
<div>...<br>..</div>
<div>...</div>
</div>【讨论】：
flexbox 如果能满足你的需要，它比 bootstrap 更好。【参考方案10】：<div class="equal row-fluid">
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
</div>
.equal .span2
width: 20%;
【讨论】：
应该是 .equal .span2 width: 20%; ... 它不工作。除第一列外，每一列都有剩余边距。【参考方案11】：我对 Mafnah 的回答投了赞成票，但再看一遍，如果您保持默认边距等，我建议以下方法更好。
<div class="equal row-fluid">
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
</div>
.equal .span2
width: 17.9%;
【讨论】：
实际宽度为 17.94872% 并且没有响应，您必须为所有 @media 查询中的每一列设置新的边距。【参考方案12】：使用类 col-sm-2 创建 5 个元素，并将类 col-sm-offset-1 也添加到第一个元素
附：这不会是全宽（它会从屏幕的左右缩进一点）
代码应该是这样的
<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>
【讨论】：
【参考方案13】：Bootstrap 4，每行列数可变
如果您希望每行最多五列，这样更少的列仍然只占行的 1/5，解决方案是使用 Bootstrap 4 的mixins ：
SCSS：
.col-2-4
@include make-col-ready(); // apply standard column margins, padding, etc.
@include make-col(2.4); // 12/5 = 2.4
.col-sm-2-4
@include make-col-ready();
@include media-breakpoint-up(sm)
@include make-col(2.4);
.col-md-2-4
@include make-col-ready();
@include media-breakpoint-up(md)
@include make-col(2.4);
.col-lg-2-4
@include make-col-ready();
@include media-breakpoint-up(lg)
@include make-col(2.4);
.col-xl-2-4
@include make-col-ready();
@include media-breakpoint-up(xl)
@include make-col(2.4);
HTML：
<div class="container">
<div class="row">
<div class="col-12 col-sm-2-4">1 of 5</div>
<div class="col-12 col-sm-2-4">2 of 5</div>
<div class="col-12 col-sm-2-4">3 of 5</div>
<div class="col-12 col-sm-2-4">4 of 5</div>
<div class="col-12 col-sm-2-4">5 of 5</div>
</div>
<div class="row">
<div class="col-12 col-sm-2-4">1 of 2</div> <!-- same width as column "1 of 5" above -->
<div class="col-12 col-sm-2-4">2 of 2</div> <!-- same width as column "2 of 5" above -->
</div>
</div>
【讨论】：
【参考方案14】：对于 Bootstrap 4.4+
使用全新的row-cols-n 类。
-
将
row-cols-5 类添加到您的.row div。无需自定义 CSS。
行列请参见此处的 4.4 文档：https://getbootstrap.com/docs/4.4/layout/grid/#row-columns
对于 Bootstrap 4.4 之前的 Bootstrap 4 版本
复制下面的 CSS（Bootstrap 作者的优秀 CSS）并将其添加到您的项目中
阅读上面引用的文档以正确使用它。
.row-cols-1>*-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%.row-cols-2>*-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%.row-cols-3>*-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%.row-cols-4>*-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%.row-cols-5>*-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%.row-cols-6>*-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%@media (min-width:576px).row-cols-sm-1>*-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%.row-cols-sm-2>*-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%.row-cols-sm-3>*-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%.row-cols-sm-4>*-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%.row-cols-sm-5>*-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%.row-cols-sm-6>*-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%@media (min-width:768px).row-cols-md-1>*-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%.row-cols-md-2>*-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%.row-cols-md-3>*-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%.row-cols-md-4>*-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%.row-cols-md-5>*-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%.row-cols-md-6>*-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%@media (min-width:992px).row-cols-lg-1>*-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%.row-cols-lg-2>*-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%.row-cols-lg-3>*-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%.row-cols-lg-4>*-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%.row-cols-lg-5>*-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%.row-cols-lg-6>*-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%@media (min-width:1200px).row-cols-xl-1>*-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%.row-cols-xl-2>*-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%.row-cols-xl-3>*-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%.row-cols-xl-4>*-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%.row-cols-xl-5>*-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%.row-cols-xl-6>*-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%
【讨论】：
【参考方案15】：在 Bootstrap 3 中启用 5 列的另一种方法是修改 Bootstrap 默认使用的 12 列格式。然后创建一个 20 列的网格（使用 Bootstrap 网站上的自定义或使用 LESS/SASS 版本）。
要在引导网站上进行自定义，请转到 Customize and Download 页面，将变量 @grid-columns 从 12 更新为 20。然后您将能够创建 4 列和 5 列。
【讨论】：
【参考方案16】：Bootstrap 默认可以扩展到 12 列？这意味着如果我们想创建一个等宽的 12 列布局，我们将在 div class="col-md-1" 内写十二次。
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-2">1</div>
<div class="col-md-2">2</div>
<div class="col-md-2">3</div>
<div class="col-md-2">4</div>
<div class="col-md-2">5</div>
<div class="col-md-1"></div>
</div>
【讨论】：
【参考方案17】：最好的方法
仅将 .row-cols-5 类添加到您的行中。所以每行有 5 个 div。
<div class="container-fluid">
<div class="row row-cols-5">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
<div class="col">10</div>
</div>
</div>
使用响应式 .row-cols-* 类快速设置最能呈现您的内容和布局的列数。普通的 .col-* 类适用于单个列（例如 .col-md-4），而行列类作为快捷方式设置在父 .row 上。
行列-* row-cols-sm-* row-cols-md-* row-cols-lg-* row-cols-xl-*你也可以使用附带的 Sass mixin，row-cols()：
.element
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md)
@include row-cols(5);
【讨论】：
【参考方案18】：可以通过嵌套和使用一点 css 覆盖来完成。
<div class="col-sm-12">
<div class="row">
<div class="col-sm-7 five-three">
<div class="row">
<div class="col-sm-4">
Column 1
</div>
<div class="col-sm-4">
Column 2
</div>
<div class="col-sm-4">
Column 3
</div><!-- end inner row -->
</div>
</div>
<div class="col-sm-5 five-two">
<div class="row">
<div class="col-sm-6">
Col 4
</div>
<div class="col-sm-6">
Col 5
</div>
</div><!-- end inner row -->
</div>
</div><!-- end outer row -->
然后是一些 css
@media (min-width: 768px)
div.col-sm-7.five-three
width: 60% !important;
div.col-sm-5.five-two
width: 40% !important;
这里是一个例子：5 equal column example
这是我在 coderwall 上的完整文章
Five equal columns in bootstrap 3
【讨论】：
【参考方案19】：在我看来，像这样使用 Less 语法会更好。 此答案基于来自@fizzix 的answer
这种方式列使用用户可能已覆盖的变量（@grid-gutter-width，媒体断点），并且五列的行为与 12 列网格的行为相匹配。
/*
* Special grid for ten columns,
* using its own scope
* so it does not interfere with the rest of the code
*/
&
@import (multiple) "../bootstrap-3.2.0/less/variables.less";
@grid-columns: 5;
@import (multiple) "../bootstrap-3.2.0/less/mixins.less";
@column: 1;
.col-xs-5ths
.make-xs-column(@column);
.col-sm-5ths
.make-sm-column(@column);
.col-md-5ths
.make-md-column(@column);
.col-lg-5ths
.make-lg-column(@column);
/***************************************/
/* Using default bootstrap now
/***************************************/
@import (multiple) "../bootstrap-3.2.0/less/variables.less";
@import (multiple) "../bootstrap-3.2.0/less/mixins.less";
/* ... your normal less definitions */
【讨论】：
【参考方案20】：这太棒了：http://www.ianmccullough.net/5-column-bootstrap-layout/
只要做：
<div class="col-xs-2 col-xs-15">
还有 CSS：
.col-xs-15
width:20%;
【讨论】：
【参考方案21】：默认情况下，Bootstrap 不提供允许我们创建五列布局的网格系统，您需要按照 Bootstrap 的方式创建默认列定义 在您的 css 文件中创建一些自定义类和媒体查询
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
.col-xs-15
width: 20%;
float: left;
@media (min-width: 768px)
.col-sm-15
width: 20%;
float: left;
@media (min-width: 992px)
.col-md-15
width: 20%;
float: left;
@media (min-width: 1200px)
.col-lg-15
width: 20%;
float: left;
还有一些html代码
<div class="row">
<div class="col-md-15 col-sm-3">
...
</div>
</div>
【讨论】：
【参考方案22】：采用 Twitter Bootstrap 样式的 5 列布局
.col-xs-15
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
.col-xs-15
width: 100%;
float: left;
@media (min-width: 768px)
.col-xs-15
width: 50%;
float: left;
@media (min-width: 992px)
.col-xs-15
width: 20%;
float: left;
@media (min-width: 1200px)
.col-xs-15
width: 20%;
float: left;
【讨论】：
【参考方案23】：一个不需要大量 CSS 的解决方案，也不需要调整引导程序默认的 12col 布局：
http://jsfiddle.net/0ufdyeur/1/
HTML：
<div class="stretch">
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
</div>
CSS：
@media (min-width: 1200px) /*if not lg, change this criteria*/
.stretch
width: 120%; /*the actual trick*/
【讨论】：
【参考方案24】：只需创建一个新类并根据需要为每个媒体查询定义其行为
@media(min-width: 768px)
.col-1-5
width: 20%;
float: left;
position: relative;
min-height: 1px;
padding-right: 5px;
padding-left: 5px;
<div class="container-fluid">
<div class="row">
<div class="col-1-5">col 1</div>
<div class="col-1-5">col 2</div>
<div class="col-1-5">col 3</div>
<div class="col-1-5">col 4</div>
<div class="col-1-5">col 5</div>
</div>
</div>
这是一个工作演示 https://codepen.io/giorgosk/pen/BRVorW
【讨论】：
【参考方案25】：引导程序 4
我阅读了所有答案，但没有找到“显而易见的答案”。基本上你需要做的是获取任何引导列（例如col-2）并编辑一些值。在这个例子中，我使用.col-custom 类。
五列相等表示每一列占用20%，因此：flex:0 0 20% 和max-width:20%。以同样的方式，您可以创建其他数量的列（7、9、11、84 或任何您想要的）。
您可以创建具有自定义宽度的 CSS 变量，并在您的项目中使用它。类似的东西：
:root
--col-custom: 20%;
.col-custom
flex: 0 0 var(--col-custom);
max-width: var(--col-custom);
工作示例：
.col-custom,
.col-sm-custom,
.col-md-custom,
.col-lg-custom,
.col-xl-custom
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
.col-custom
flex: 0 0 20%;
max-width: 20%;
@media (min-width: 576px)
.col-sm-custom
flex: 0 0 20%;
max-width: 20%;
@media (min-width: 768px)
.col-md-custom
flex: 0 0 20%;
max-width: 20%;
@media (min-width: 992px)
.col-lg-custom
flex: 0 0 20%;
max-width: 20%;
@media (min-width: 1200px)
.col-xl-custom
flex: 0 0 20%;
max-width: 20%;
/*DEMO*/
.col-custom,.col-sm-custom,.col-md-custom,.col-lg-custom,.col-xl-customheight:100px;border:1px red solid<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-sm-custom"></div>
<div class="col-sm-custom"></div>
<div class="col-sm-custom"></div>
<div class="col-sm-custom"></div>
<div class="col-sm-custom"></div>
</div>
</div>【讨论】：
【参考方案26】：在 bootstrap 3 中，我认为我们可以做类似的事情，删除左右边距：
<div class="row this_row">
<div class="col-md-2 col-md-offset-1"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
和 CSS
.this_row
margin: 0 -5%;
【讨论】：
【参考方案27】：如何在引导程序中添加 5 列网格
.col-lg-1-5,.col-md-1-5,.col-sm-1-5,.col-xs-1-5min-height:1px;padding-left:15px;padding-right:15px;position:relative; width:100%;box-sizing:border-box;
.itemwidth:100%;height:100px; background-color:#cfcfcf;
.col-xs-1-5width: 20%;float:left;
@media (min-width: 767px) .col-sm-1-5width: 20%;float:left;
@media (min-width: 992px) .col-md-1-5width: 20%;float:left;
@media (min-width: 1200px) .col-lg-1-5width: 20%;float:left; <div class="row">
<div class="col-sm-1-5">
<div class="item">Item 1</div>
</div>
<div class="col-sm-1-5">
<div class="item">Item 2</div>
</div>
<div class="col-sm-1-5">
<div class="item">Item 3</div>
</div>
<div class="col-sm-1-5">
<div class="item">Item 4</div>
</div>
<div class="col-sm-1-5">
<div class="item">Item 5</div>
</div>
</div>【讨论】：
【参考方案28】：无需编辑 CSS 的最简单解决方案是：
<div class="row">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<div class="col-sm-12">Column 1</div>
</div>
<div class="btn-group">
<div class="col-sm-12">Column 2</div>
</div>
<div class="btn-group">
<div class="col-sm-12">Column 3</div>
</div>
<div class="btn-group">
<div class="col-sm-12">Column 4</div>
</div>
<div class="btn-group">
<div class="col-sm-12">Column 5</div>
</div>
</div>
</div>
如果您需要这些突破任何断点，只需制作 btn-group 块。希望这对某人有所帮助。
【讨论】：
【参考方案29】：五列显然不是 bootstrap 设计的一部分。
但是使用 Bootstrap v4 (alpha)，有两件事可以帮助处理复杂的网格布局
-
Flex (http://v4-alpha.getbootstrap.com/getting-started/flexbox/)，新的元素类型（官方-https://www.w3.org/TR/css-flexbox-1/）
响应式实用程序 (http://v4-alpha.getbootstrap.com/layout/responsive-utilities/)
简单来说，我正在使用
<style>
.flexc display: flex; align-items: center; padding: 0; justify-content: center;
.flexc a display: block; flex: auto; text-align: center; flex-basis: 0;
</style>
<div class="container flexc hidden-sm-down">
<!-- content to show in MD and larger viewport -->
<a href="#">Link/Col 1</a>
<a href="#">Link/Col 2</a>
<a href="#">Link/Col 3</a>
<a href="#">Link/Col 4</a>
<a href="#">Link/Col 5</a>
</div>
<div class="container hidden-md-up">
<!-- content to show in SM and smaller viewport, I don't think 5 cols in smaller viewport are gonna be alright :) -->
</div>
无论是 5、7、9、11、13 还是其他赔率，都可以。 我很确定 12 格标准能够服务于 90% 以上的用例 - 所以让我们这样设计 - 开发也更容易！
很好的 flex 教程在这里“https://css-tricks.com/snippets/css/a-guide-to-flexbox/”
【讨论】：
【参考方案30】：我已经根据引导定义为任意数量的列创建了 SASS 混合定义（我个人在 12 之外使用 8、10 和 24）：
// Extended bootstrap grid system
//
// Framework grid generation
//
// Based on Bootstrap 'bootstrap/_grid-framework.scss'. Generates classes in form of `.col-(size)-x-num` of width x/num.
@mixin make-extended-grid-columns($num-columns, $i: 1, $list: ".col-xs-#$i-#$num-columns, .col-sm-#$i-#$num-columns, .col-md-#$i-#$num-columns, .col-lg-#$i-#$num-columns")
@for $i from (1 + 1) through $num-columns
$list: "#$list, .col-xs-#$i-#$num-columns, .col-sm-#$i-#$num-columns, .col-md-#$i-#$num-columns, .col-lg-#$i-#$num-columns";
#$list
position: relative;
min-height: 1px;
padding-left: ($grid-gutter-width / 2);
padding-right: ($grid-gutter-width / 2);
@mixin float-extended-grid-columns($class, $num-columns, $i: 1, $list: ".col-#$class-#$i-#$num-columns")
@for $i from (1 + 1) through $num-columns
$list: "#$list, .col-#$class-#$i-#$num-columns";
#$list
float: left;
@mixin calc-extended-grid-column($index, $num-columns, $class, $type)
@if ($type == width) and ($index > 0)
.col-#$class-#$index-#$num-columns
width: percentage(($index / $num-columns));
@if ($type == push) and ($index > 0)
.col-#$class-push-#$index-#$num-columns
left: percentage(($index / $num-columns));
@if ($type == pull) and ($index > 0)
.col-#$class-pull-#$index-#$num-columns
right: percentage(($index / $num-columns));
@if ($type == offset) and ($index > 0)
.col-#$class-offset-#$index-#$num-columns
margin-left: percentage(($index / $num-columns));
@mixin loop-extended-grid-columns($num-columns, $class, $type)
@for $i from 1 through $num-columns - 1
@include calc-extended-grid-column($i, $num-columns, $class, $type);
@mixin make-extended-grid($class, $num-columns)
@include float-extended-grid-columns($class, $num-columns);
@include loop-extended-grid-columns($num-columns, $class, width);
@include loop-extended-grid-columns($num-columns, $class, pull);
@include loop-extended-grid-columns($num-columns, $class, push);
@include loop-extended-grid-columns($num-columns, $class, offset);
您可以通过以下方式简单地创建类：
$possible-number-extended-grid-columns: 8, 10, 24;
@each $num-columns in $possible-number-extended-grid-columns
// Columns
@include make-extended-grid-columns($num-columns);
// Extra small grid
@include make-extended-grid(xs, $num-columns);
// Small grid
@media (min-width: $screen-sm-min)
@include make-extended-grid(sm, $num-columns);
// Medium grid
@media (min-width: $screen-md-min)
@include make-extended-grid(md, $num-columns);
// Large grid
@media (min-width: $screen-lg-min)
@include make-extended-grid(lg, $num-columns);
我希望有人会觉得它有用
【讨论】：
以上是关于twitter bootstrap 中的五个相等的列的主要内容，如果未能解决你的问题，请参考以下文章