Twitter Bootstrap中的五个等宽列

Question

我想在我正在构建的页面上拥有5个等宽列，但我似乎无法理解这里如何使用5列栅格： http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/responsive 以上演示的5列栅格是Twitter Bootstrap框架的一部分吗？

- Gandalf

---

我刚刚意识到，所提及的版本是v1.3.0，而当前版本为2.0.2。最新版本是12列网格，这意味着我可以拥有2、3、4和6个相等的列。我的问题是，是否可能在不改变很多东西的情况下拥有5个相等的列。 - Gandalf

你可以这样做，但需要对一些网格元素和响应式网格元素进行大量修改。你的网站是否具有响应式设计？如果是，那么回答会更容易一些；否则需要编写大量代码。 - Andres Ilich

我在使用.container.one-fifth.column { width:17%; } 取得了一些成功，尽管我期望会有令人惊叹的事情发生，比如17.87847%。 - Gandalf

这是Bootstrap似乎完全忽略的事情之一，例如Foundation已经创建了一个块网格，可以拥有任意数量的列，当然还可以更改在不同断点下显示多少行。查看文档 我强烈建议不要尝试在此基础上扩展Bootstrap，只需继续创建自己的布局，将每行的任意列数概括起来，您可以从这个Foundation模块中作弊并根据需要进行调整。 - Zyad Sherif

Bootstrap 4 - 只需使用自动布局。它不需要额外的CSS或SASS：https://dev59.com/questions/7Gkv5IYBdhLWcg3wvDNF#42226652 - Carol Skelly

Answer 1

针对 Bootstrap 4

Bootstrap 4 现在默认使用 flexbox，因此您可以直接获得其神奇的功能。请查看自动布局列，它们根据嵌套的列数动态调整宽度。

以下是一个示例：

<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>

演示

---

适用于Bootstrap 3

这里提供了一个采用Twitter Bootstrap制作的全宽度5列布局。

这是迄今为止最先进的解决方案，因为它可以与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>

工作演示 - 扩展框架以查看列变得响应。

另一个演示 - 将新的col-*-5ths类与其他类（如col-*-3和col-*-2）结合使用。 调整框架大小以查看它们在响应视图中全部更改为col-xs-6。

- Fizzix

---

称它们为 col-*-15 可能会令人困惑。这似乎暗示它们是 15 列网格系统的一部分，但实际上并不是。 - Paul D. Waite

@PaulD.Waite - 我在我的答案中添加了一条小注释，让人们知道。 - Fizzix

“col--15” 对我来说没问题，但是“col--5ths”可能是一个稍微不那么令人困惑的列名。这就是我使用它的原因，以便我的其他开发人员不会感到困惑。 - Mordred

嘿 @scragar - 如果你查看所有 Bootstrap 当前列类别的样式，你会发现它们都包含 position:relative; min-height: 1px; padding-right: 15px; padding-left: 15px;。基本上，我发布的代码只是在这个基础上进行扩展，以便它们完全匹配 Bootstrap 的内置样式。然后我将宽度应用为 20%，以便页面上可以容纳5个相等的列。非常简单 :) - Fizzix

2/5列的命名怎么样？ 或者我们应该使用： col-md-1ths表示1/5，col-md-2ths表示2/5，col-md-5ths表示5/5 = 全宽？ - Alex

Answer 2

使用五个类为 span2 的 div，给第一个 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>

- jkofron.e

---

它没有占满全宽。不过看起来还不错。 - machineaddict

我发布的解决方案可以让内容充满整个宽度，并创建5个等宽的列：这里是答案。 - Fizzix

不像@fizzix在下面提供的答案那样完全铺满宽度。会在两侧产生不需要的边距，如此- http://jsfiddle.net/wdo8L1ww/ - Fizzix

对于那些在使用Bootstrap 3的时候也使用Less/Sass的人，请查看@lightswitch05回答（https://dev59.com/7Gkv5IYBdhLWcg3wvDNF#21142019）。 - ithil

Bootstrap 4的5列（全宽）不需要CSS或SASS：https://dev59.com/7Gkv5IYBdhLWcg3wvDNF#42226652 - Carol Skelly

Answer 3

对于Bootstrap 3，如果你想要全宽度并且正在使用LESS、SASS或类似的东西，你只需要使用Bootstrap的混合函数：make-md-column，make-sm-column等即可。详见Bootstrap的混合函数文档。

.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不仅可以构建真正的全宽bootstrap列类，还可以构建所有相关的帮助类，如.col-md-push-*、.col-md-pull-*和.col-md-offset-*：

LESS:

.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，这是完全有效的，但这会改变所有bootstrap的核心列宽度。使用上述mixin函数将在默认的bootstrap列上添加5列布局，因此不会破坏任何第三方工具或现有样式。

- lightswitch05

---

最干净的解决方案是，因为2.4是12的五分之一（2.4*5=12），适用于Bootstrap 3中的12列网格。也适用于make-xs，make-sm，但与其他标准的列定义组合使用时将不起作用（最新的优先）。 - Sherbrow

我对这个答案的点赞数相对较少感到震惊。它是迄今为止最不“hacky”的答案，不仅使用了与其他Bootstrap列类相同的命名约定，而且还使用了Bootstrap用于创建自己列的相同mixin，使其至少在Bootstrap 4之前可能具有未来的兼容性。 - Chris Fritz

这应该是最好的答案。我已经为自己创建了一个库（包括 offset、pull 和 push），可以参考一下：查看链接。 - Kenny Ki

正如大家所说，是的，这现在是正确的答案。@Sherbrow说他们“不能与其他标准列定义组合使用”，但这并不是因为这个解决方案有什么问题，而只是因为12％5！= 0。 - Nick M

@lightswitch05 很遗憾，那对我来说不太合适，因为我的列数是动态的。即使只有一列，我仍希望它占据屏幕的五分之一，但使用Fizzix的答案，单个列会覆盖整个屏幕。我成功地使用了新的Bootstrap 4 mixin函数来解决这个问题。如果您愿意，我可以更新您的答案以包括这个内容？ - Plog

Answer 4

Bootstrap 5 +（更新至2023年）

Bootstrap 5现在有row-cols-*类，可以轻松获得5列...

<div class="row row-cols-5">
    <div class="col"> </div>
    <div class="col"> </div>
    <div class="col"> </div>
    <div class="col"> </div>
...
</div>

演示

---

Bootstrap 4.1+（2019年更新）

这里使用auto-layout grid，没有额外的CSS或SASS，有5个等宽的全屏列：

<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列布局。

- Zim

---

迫不及待地等待它的稳定 :) - nicolallias

好的，但只适用于5个元素的行。如果你有更多，那么就是错误的。 在这里查看我的增强版fiddle：https://jsfiddle.net/djibe89/ntq8h910/ - djibe

这就是为什么我解释了你必须每5列使用break的原因。你的解决方案可行，但需要额外的CSS。 - Carol Skelly

还要考虑将 flex-nowrap 添加到 .row 中，因为（自动）列可能会超出父元素的宽度。 - Luuk Skeur

在代码中添加一个col-12来换行是个绝妙的主意，因为你可以在其他屏幕尺寸下隐藏它。例如，<div class="col-sm-12"></div>会使它们在较大的屏幕尺寸下显示为5个项目，但在较小的尺寸下显示为普通列表。 - Eliezer Berlin

Answer 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%;
    }
}

- plaidcorp

---

我应该把它放在哪里，怎样使用它？ - sergserg

1. 将它放在 Bootstrap CSS 文件之后。
2. 在 .row 中添加 .fivecolumns 类，然后嵌套五个带有 .col[-sm,-lg]-2 类的列。

- plaidcorp

在某些情况下，它不能完美地铺满整个宽度。 - Fizzix

为什么没有添加 col-xs-2 到声明中？ - ganders

@ganders 只是疏忽了；请查看此页面上的另一个答案：https://dev59.com/7Gkv5IYBdhLWcg3wvDNF - plaidcorp

Answer 6

保留原始的Bootstrap 12列布局，不要自定义。唯一需要进行的修改是在原始Bootstrap响应式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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</a></p>
    </div>
</div>

注意：虽然乘以5的结果不等于12列，但你可以理解其中的意义 :)

这里有一个可工作的示例http://jsfiddle.net/v3Uy5/6/

- machineaddict

Answer 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%

这种技巧在许多情况下都能得到可接受的结果，而且不需要任何CSS更改（我们只使用了原生的Bootstrap类）。

- DraggonZ

Answer 8

创建自定义的基于Bootstrap的5列布局下载

前往 Bootstrap 2.3.2 (或者 Bootstrap 3) 自定义页面并设置以下变量（不要输入分号）：

@gridColumns:           5;
@gridColumnWidth:       172px;
@gridColumnWidth1200:   210px;
@gridColumnWidth768:    128px;
@gridGutterWidth768:    21px;

下载你的构建版本。这个网格将适应默认容器，保留默认的间距宽度（几乎一致）。

注意：如果您正在使用LESS，请更新variables.less。

- Pavlo

Answer 9

使用flexbox 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>

- caub

---

如果符合您的需求，Flexbox比Bootstrap更好。 - ml242

Answer 10

创建5个class为col-sm-2的元素，并将第一个元素添加class 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>

- agDev

---

这是我选择解决此问题的方案。我相信在 Bootstrap 3、4 和 5 中都能很好地工作。 - Andrew Magill