关键词：
【中文标题】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);
我希望有人会觉得它有用
【讨论】：
5 个相等的列仅适用于大屏幕 - twitter bootstrap
】5个相等的列仅适用于大屏幕-twitterbootstrap【英文标题】：5equalcolumnsforlargescreenonly-bootstrap5【发布时间】：2022-01-1407:27:14【问题描述】：<divclass="row"><divclass="col">1of5</div><divclass="col">2of5</div><divcla 查看详情
简述ado.net中的五个主要对象
...询、新增、修改、删除数据等指令，以及调用存在数据库中的存储过程等。这个对象是架构在Connection对象上 查看详情
sqlipl中的五个检票口（2008-2016）(代码片段)
restful框架中的mixin中的五个类视图
...据。因为在AuthorView1类中post函数是创造，所以他运用父类中的CreateModelMixin类中create函数方法。但是，我们注意到这里面有一个get_serializer的这个方法，死活我们点不出来。那说明这个方 查看详情
使用 RegEx 匹配 Excel/VBA 中的五个字符，第一个字符取决于单元格值
】使用RegEx匹配Excel/VBA中的五个字符，第一个字符取决于单元格值【英文标题】：MatchingfivecharactersinExcel/VBAusingRegEx,withfirstcharacterbeingdependantoncellvalue【发布时间】：2017-06-1607:59:22【问题描述】：我需要你的帮助！我想在Excel/VBA环... 查看详情
摆脱 Twitter Bootstrap 中的所有圆角
】摆脱TwitterBootstrap中的所有圆角【英文标题】：GettingridofalltheroundedcornersinTwitterBootstrap【发布时间】：2012-04-0206:50:54【问题描述】：我喜欢TwitterBootstrap2.0-我喜欢它如此完整的库......但我想对一个非常方方正正的网站进行全局修... 查看详情
Twitter Bootstrap 中的导航栏颜色
】TwitterBootstrap中的导航栏颜色【英文标题】：navbarcolorinTwitterBootstrap【发布时间】：2012-04-0919:23:39【问题描述】：如何更改TwitterBootstrap2.0.2导航栏的背景颜色？如何更改导航栏所有元素的颜色以反映背景颜色？【问题讨论】：已... 查看详情
Twitter Bootstrap 中的树 [关闭]
】TwitterBootstrap中的树[关闭]【英文标题】：TreesinTwitterBootstrap[closed]【发布时间】：2012-06-2510:15:11【问题描述】：我一直在努力创建一个使用尽可能多的CSS和尽可能少的JS（仅用于状态等）的树（如目录树），我想知道是否有一些... 查看详情
Twitter Bootstrap 3 中的圆桌会议
】TwitterBootstrap3中的圆桌会议【英文标题】：RoundedtablesinTwitterBootstrap3【发布时间】：2013-09-1419:06:02【问题描述】：Bootstrap3已在表格上丢弃了圆角。请问当我申请.table-bordered课程时，我应该应用哪些样式来恢复它们？更新到目前... 查看详情
如何处理 Twitter Bootstrap 中的模态关闭事件？
】如何处理TwitterBootstrap中的模态关闭事件？【英文标题】：HowtohandlethemodalclosingeventinTwitterBootstrap?【发布时间】：2012-09-0109:36:20【问题描述】：在Twitter引导程序中，查看modals文档。我不知道是否有办法监听模式的关闭事件并执... 查看详情
Twitter Bootstrap 2.0 中的中心导航栏
】TwitterBootstrap2.0中的中心导航栏【英文标题】：CenterNavbarinTwitterBootstrap2.0【发布时间】：2012-04-2502:35:49【问题描述】：假设我们使用TwitterBootstrap2.0有以下导航栏标记。<divclass="navbarnavbar-fixed-top"><divclass="navbar-innerpull-center"... 查看详情
Bootstrap 模态弹出窗口中的 Twitter“推文按钮”未呈现
】Bootstrap模态弹出窗口中的Twitter“推文按钮”未呈现【英文标题】：Twitter\'Tweetbutton\'insideaBootstrapModalPopupnotrendering【发布时间】：2021-11-1105:24:36【问题描述】：我有一个RazorPages应用程序，我希望用户能够从中发送推文。我浏览... 查看详情
Twitter Bootstrap 中的 Font Awesome 与 Glyphicons
】TwitterBootstrap中的FontAwesome与Glyphicons【英文标题】：FontAwesomevsGlyphiconsinTwitterBootstrap【发布时间】：2013-06-2301:41:26【问题描述】：我是Web开发的初学者，最近开始使用TwitterBootstrap，我知道它使用Glyphicons，我已经知道如何使用它... 查看详情
Twitter Bootstrap 和 Chrome 中的奇怪溢出问题
】TwitterBootstrap和Chrome中的奇怪溢出问题【英文标题】：WeirdoverflowissueinTwitterBootstrapandChrome【发布时间】：2013-04-2704:18:46【问题描述】：我有一个TwitterBootstrap井，其中包含一个Select2组件。演示可以在http://jsfiddle.net/U4KTM/1/查看Chrom... 查看详情
下拉列表中的选项卡-twitter bootstrap
】下拉列表中的选项卡-twitterbootstrap【英文标题】：tabsinsideadropdown-twitterbootstrap【发布时间】：2018-02-2114:02:39【问题描述】：这可能吗？我打算做一个，但不知道怎么做。我正在使用引导程序。这就是我现在所拥有的一切<lidata... 查看详情
Twitter Bootstrap - Internet Explorer 中的导航栏问题
】TwitterBootstrap-InternetExplorer中的导航栏问题【英文标题】：TwitterBootstrap-navbarissuesininternetexplorer【发布时间】：2012-04-0413:06:14【问题描述】：我在我的rails应用程序中使用TwitterBootstrap。我的导航栏在Firefox/Chrome/Safari中看起来很完... 查看详情
Twitter Bootstrap 3 中的图片默认没有响应？
】TwitterBootstrap3中的图片默认没有响应？【英文标题】：ImagesnotresponsivebydefaultinTwitterBootstrap3?【发布时间】：2013-07-2917:50:04【问题描述】：看起来在新版本3.0中，如果图像是具有相同类名的div的一部分，我必须将图像的类名设置... 查看详情
IE 9 中的 Twitter Bootstrap + jQuery 验证问题
】IE9中的TwitterBootstrap+jQuery验证问题【英文标题】：TwitterBootstrap+jQueryvalidationissueinIE9【发布时间】：2011-12-0521:39:25【问题描述】：我在使用模式显示登录框的页面上使用twitterbootstrapcss框架（bootstrap-modal.js）。在登录框中，我使... 查看详情