402

我想在我正在构建的页面上有 5 个相等的列，但我似乎无法理解这里如何使用 5 列网格：http: //web.archive.org/web/20120416024539/http ://domain7 .com/mobile/tools/bootstrap/responsive

上面演示的五列网格是 twitter bootstrap 框架的一部分吗？

4

45 回答 45

578

对于引导程序 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>

工作演示

对于引导程序 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在响应视图中查看它们全部更改。

于 2014-04-02T00:21:07.013 回答
432

使用五个具有 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>
于 2012-12-21T23:12:17.617 回答
170

对于Bootstrap 3，如果你想要全角并且正在使用LESS,SASS或类似的东西，你所要做的就是利用Bootstrap 的 mixin 函数 make-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)
}

萨斯：

.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-*、.col-md-pull-*和.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)
}

萨斯：

.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 方工具或现有样式。

于 2014-01-15T15:52:42.633 回答
49

2019 年更新

引导 4.1+

这是使用自动布局网格的 5 个相等的全宽列（没有额外的 CSS 或 SASS ） ：

<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。您可以.row使用分隔符（例如每 5 列<div class="col-12"></div>或<div class="w-100"></div>每 5 列）将 5 列包裹在同一列中。

另请参阅：Bootstrap - 5 列布局

于 2017-02-14T12:48:57.053 回答
32

下面是 @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%;
    }
}
于 2013-08-01T23:00:49.873 回答
27

保留原始引导程序的 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 &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>

注意：即使 span2 乘以 5 不等于 12 列，您也明白了 :)

可以在这里找到一个工作示例http://jsfiddle.net/v3Uy5/6/

于 2013-07-04T08:41:28.320 回答
11

如果您不需要完全相同宽度的列，您可以尝试使用嵌套创建 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 更改（我们仅使用本机引导类）。

于 2015-03-18T12:17:26.057 回答
9

为 5 列布局创建自定义引导下载

进入Bootstrap 2.3.2（或Bootstrap 3）自定义页面，设置以下变量（不要输入分号）：

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

下载您的构建。这个网格将适合默认容器，保留默认的装订线宽度（几乎）。

注意：如果您使用的是 LESS，请variables.less改为更新。

于 2012-09-08T22:41:32.453 回答
7

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

于 2015-11-09T18:12:49.327 回答
6 
<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%;
}
于 2013-01-24T08:12:09.957 回答
6

我投票赞成 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%;
}
于 2013-05-13T16:31:07.413 回答
5

使用类 col-sm-2 创建 5 个元素，并将类 col-sm-offset-1 添加到第一个元素

ps 这不会是全角（会从屏幕左右缩进一点）

代码应该看起来像这样

<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>
于 2016-05-08T20:48:14.873 回答
5

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>
于 2018-05-29T15:24:53.193 回答
5

对于引导 4.4+

使用全新的row-cols-n类。

  1. 将row-cols-5类添加到您的.rowdiv。无需自定义 CSS。
  2. 有关行列，请参见此处的 4.4 文档：https ://getbootstrap.com/docs/4.4/layout/grid/#row-columns

对于 Bootstrap 4.4 之前的 Bootstrap 4 版本

  1. 复制下面的 CSS（Bootstrap 作者的优秀 CSS）并将其添加到您的项目中

  2. 阅读上面引用的文档以正确使用它。

    .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%}}

于 2019-12-28T11:25:55.103 回答
4

在 Bootstrap 3 中启用 5 列的另一种方法是修改 Bootstrap 默认使用的 12 列格式。然后创建一个 20 列的网格（使用 Bootstrap 网站上的自定义或使用 LESS/SASS 版本）。

要在引导网站上进行自定义，请转到自定义和下载页面，将变量 @grid-columns从更新12为20。然后您将能够创建 4 列和 5 列。

于 2014-07-22T14:31:02.950 回答
4

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>
于 2016-02-28T18:32:39.460 回答
4

最好的办法

仅将.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 上。

  • 行列-*
  • 行-cols-sm-*
  • 行-cols-md-*
  • 行列-lg-*
  • 行-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);
  }
}
于 2021-08-09T19:08:26.603 回答
3

它可以通过嵌套和使用一点 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>​&lt;!-- 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 等列示例

这是我在 coderwall 上的完整文章

bootstrap 3中的五个相等的列

于 2014-03-12T14:36:42.717 回答
3

在我看来，最好将它与 Less 语法一起使用。此答案基于@fizzix的答案

这样，列使用用户可能已覆盖的变量（@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 */
于 2014-08-09T13:53:34.887 回答
3

这太棒了：http ://www.ianmccullough.net/5-column-bootstrap-layout/

做就是了：

<div class="col-xs-2 col-xs-15">

和 CSS：

.col-xs-15{
    width:20%;
}
于 2015-06-17T14:33:21.263 回答
3

默认情况下，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>
于 2015-12-21T04:32:19.107 回答
3

具有 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;
    }
}
于 2016-07-12T09:13:38.417 回答
3

一个不需要大量 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*/
  }
}
于 2017-03-01T16:38:10.090 回答
3

只需创建一个新类并根据需要为每个媒体查询定义其行为

@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

于 2017-05-14T19:04:53.750 回答
3

引导程序 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-custom{height: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>

于 2019-09-07T17:38:25.040 回答
2

在引导程序 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%;
}
于 2015-07-08T09:10:36.397 回答
2

如何在引导程序中添加 5 列网格

.col-lg-1-5,.col-md-1-5,.col-sm-1-5,.col-xs-1-5{min-height:1px;padding-left:15px;padding-right:15px;position:relative; width:100%;box-sizing:border-box;}
.item{width:100%;height:100px; background-color:#cfcfcf;}
.col-xs-1-5{width: 20%;float:left;} }

@media (min-width: 767px){ .col-sm-1-5{width: 20%;float:left;} }
@media (min-width: 992px){ .col-md-1-5{width: 20%;float:left;} }
@media (min-width: 1200px){ .col-lg-1-5{width: 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>

于 2015-09-17T09:50:24.653 回答
2

无需编辑 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 块。希望这可以帮助某人。

于 2016-03-02T06:53:40.580 回答
2

五列显然不是引导程序的设计部分。

但是使用 Bootstrap v4 (alpha)，有两件事可以帮助复杂的网格布局

  1. Flex（http://v4-alpha.getbootstrap.com/getting-started/flexbox/），新元素类型（官方-https: //www.w3.org/TR/css-flexbox-1/）
  2. 响应式实用程序（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/ ”

于 2016-05-08T17:36:25.013 回答
2

我已经为任意数量的列创建了基于引导定义的 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);
  }

}

我希望有人会觉得它有用

于 2016-06-06T13:09:56.430 回答
2

Bootstrap 或其他网格系统并不总是意味着更简单和更好。在您的 .container 或 .row （以保持您的响应式布局）内，您可以创建 5 个 div（使用类 .col fe）并像这样添加 css：
.col { width: 20%; float: left };

更新：现在最好使用 flexbox

于 2016-11-02T16:36:24.180 回答
2

是否有人使用 bootstrap-sass (v3)，这是使用 bootstrap 混合的 5 列的简单代码：

  .col-xs-5ths {
     @include make-xs-column(2.4);
  }

  @media (min-width: $screen-sm-min) {
     .col-sm-5ths {
        @include make-sm-column(2.4);
     }
  }

  @media (min-width: $screen-md-min) {
     .col-md-5ths {
        @include make-md-column(2.4);
     }
  }

  @media (min-width: $screen-lg-min) {
     .col-lg-5ths {
        @include make-lg-column(2.4);
     }
  }

确保您已包括：

@import "bootstrap/variables";
@import "bootstrap/mixins";
于 2018-06-09T08:56:00.900 回答
2

对于 Bootstrap 5 或更高版本

您可以使用row-cols-类名。

例如：row-cols-1, row-cols-5,row-cols-lg-5

<div class="container">
  <div class="row row-cols-5">
     // place your all cols here
  </div>
</div>

更多信息请阅读官方文档

于 2021-11-09T17:16:48.903 回答
1 

.col-xs-2-4 {
  position: relative;
  float: left;
  width: 20%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.col-sm-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .col-sm-2-4 {
    float: left;
    width: 20%;
  }
}
.col-md-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 992px) {
  .col-md-2-4 {
    float: left;
    width: 20%;
  }
}
.col-lg-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 1200px) {
  .col-lg-2-4 {
    float: left;
    width: 20%;
  }
}

于 2014-12-22T09:38:20.227 回答
1

对于 twitter bootstrap 3，这是实现此目的的最简单方法：

<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
于 2015-01-21T13:45:01.937 回答
1

如果我们需要使用 LESS 迭代的 5 列网格，则对 @lightswitch 的回答进行即兴创作

.make-fifth-col(@index) when (@index > 0) {
  @class-name: ~".col-md-5th-@{index}";

  @{class-name} {
    .make-md-column(1.2*@index);
  }

  .make-fifth-col(@index - 1);
}

.make-fifth-col(10);

.col-md-5th-1, col-md-5th-2, col-md-5th-3,这将生成分别对应于10%, 20%, 30%...的css 类等

于 2015-07-13T16:51:50.863 回答
1

引导网格系统分成 12 个网格。所以我把它分成两个网格 (7+5)。这 7 和 5 也包含完整的 12 个网格。这就是我分开 7(4+4+4) 和 5(6) 的原因+6) 所以它会占用所有内容，简单

HTML

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

CSS

div.col-sm-7.five-three {
  width: 60% !important;
}
div.col-sm-5.five-two {
  width: 40% !important;
}
于 2015-09-18T06:24:53.890 回答
1

您可以使用这个小技巧使 col-md-2 与偏移解决方案全宽。它使用引导程序删除（隐藏）15px 填充的方式。

我的意思是添加“-”边距。实际上是 calc(-10% - 15px); 两边的边距。（10% 是偏移宽度，15px 是内边距）。

唯一的缺点是它会使页面水平滚动，因此您需要在行的父级上使用 overflow-x:hidden。

css:
.row-xs-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
}
@media (min-width: 768px) {
  .row-sm-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
  }
}
@media (min-width: 992px) {
  .row-md-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
  }
}
@media (min-width: 1200px) {
  .row-lg-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
  }
}

html:
<div style="overflow-x:hidden;">
  <div class="row row-md-5">
    <div class="col-xs-6 col-md-2 col-md-offset-1">col1</div>
    <div class="col-xs-6 col-md-2">col2</div>
    <div class="col-xs-6 col-md-2">col3</div>
    <div class="col-xs-6 col-md-2">col4</div>
    <div class="col-xs-6 col-md-2 text-right">col5</div>
  </div>
</div>

这是演示：http: //jsfiddle.net/sct3j/171/

于 2016-02-24T11:37:33.750 回答
1 
.col-half-offset{
    margin-left:4.166666667% !important;
    float: left;
}

<div className="row1 marginTop20">
    <div className="col-xs-12 col-sm-2 col-md-2">
        1
    </div>
    <div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
        2
    </div>
    <div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
        3
    </div>
    <div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
        4
    </div>
    <div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
        5
    </div>
    <div className="clearfix"></div>
</div>
于 2018-09-06T12:27:29.483 回答
1

我对这个问题的首选方法是使用基于 mixin 的现有 Bootstrap 变量创建一个 SASS make-grid-columnsmixin。

// Custom Grid Columns
// 
// $name - determines the class names: eg. ".col-5ths, .col-sm-5ths ..."
// $size - determines the width (2.4 is one fifth of 12, the default number of columns)
@mixin custom-grid-columns($name, $size, $grid-columns: $grid-columns, $breakpoints: $grid-breakpoints) {
    $columns: round($grid-columns / $size);

    %custom-grid-column {
        @include make-col-ready();
    }

    @each $breakpoint in map-keys($breakpoints) {
        $infix: breakpoint-infix($breakpoint, $breakpoints);

        .col#{$infix}-#{$name} {
            @extend %custom-grid-column;
        }

        @include media-breakpoint-up($breakpoint, $breakpoints) {
            // Create column
            .col#{$infix}-#{$name} {
                @include make-col($size);
            }

            // Create offset
            @if not ($infix=="") {
                .offset#{$infix}-#{$name} {
                    @include make-col-offset($size);
                }
            }
        }
    }
}

然后您可以调用 mixin 来生成自定义列和偏移量类。

@include custom-grid-columns('5ths', 2.4);
于 2018-09-26T17:29:46.197 回答
1

在 bootstrap v4.3.1 中，它是 12 / 5 = 2.4 列宽的列。我们称它为 col-2dot4（和 col-sm-2dot4、col-md-2dot4、...）。

每列应该有 20% 的可用空间。

出来的 SCSS 代码如下：

@mixin make-5-grid-column($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {

  // Common properties for all breakpoints
  %grid-column {
    position: relative;
    width: 100%;
    padding-right: $gutter / 2;
    padding-left: $gutter / 2;
  }

  @each $breakpoint in map-keys($breakpoints) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    .col#{$infix}-2dot4 {
      @extend %grid-column;
    }

    .col#{$infix},
    .col#{$infix}-auto {
      @extend %grid-column;
    }

    @include media-breakpoint-up($breakpoint, $breakpoints) {

      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
      .col#{$infix} {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
      }

      .col#{$infix}-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%; // Reset earlier grid tiers
      }


      .col#{$infix}-2dot4 {
        @include make-col(1, 5);
      }
    }
  }
}

@if $enable-grid-classes {
  @include make-5-grid-column();
}
于 2019-03-03T13:01:43.243 回答
1

boostrap 今天提供了使用内置类均匀填充一行的可能性，该类不告诉跨越十二列中有多少列：

你可以使用col/ col-xx ：

div div div {
  border: solid;
  margin: 2px;/* this can be added without breaking the row */
}
div div div:before {
content:attr(class);/* show class used */
color:crimson
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<p>Class used , play snippet in full page to test behavior on resizing :</p>
<div class="container">
  <div class="row">
    <div class="col-sm"></div>
    <div class="col-sm"></div>
    <div class="col-sm"></div>
    <div class="col-sm"></div>
    <div class="col-sm"></div>
  </div>
  <div class="row">
    <div class="col-md"></div>
    <div class="col-md"></div>
    <div class="col-md"></div>
    <div class="col-md"></div>
    <div class="col-md"></div>
  </div>
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
  </div>
</div>

flex-grow-x 也可以使用

div div div {
  border: solid;
  /* it allows margins too */
  margin: 3px;
}

div div div:before {
  content: attr(class);
  /* show class used */
  color: crimson
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="flex-grow-1"></div>
    <div class="flex-grow-1"></div>
    <div class="flex-grow-1"></div>
    <div class="flex-grow-1"></div>
    <div class="flex-grow-1"></div>
  </div>
</div>

于 2020-03-02T21:49:53.780 回答
1

如果使用引导程序 4 和 SASS（+引导程序变量），您可以使用这个简化的答案：

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

  .col#{$infix}-fifth {
    @extend %grid-column;
  }

  @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
    .col#{$infix}-fifth {
      flex: 0 0 20%;
      max-width: 20%;
    }
  }
}

还支持断点，您可以简单地添加新.col#{$infix}-xxx类

于 2021-10-20T09:59:18.597 回答
0

最简单的方法是添加row-cols-5到您的行中。在这里阅读更多

<div class="container">
  <div class="row row-cols-5">
    <div class="col">Col 1</div>
    <div class="col">Col 2</div>
    <div class="col">Col 3</div>
    <div class="col">Col 4</div>
    <div class="col">Col 5</div>
  </div>
</div>


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
<div class="row row-cols-5">
  <div class="col border bg-primary">Col 1</div>
  <div class="col border bg-primary">Col 2</div>
  <div class="col border bg-primary">Col 3</div>
  <div class="col border bg-primary">Col 4</div>
  <div class="col border bg-primary">Col 5</div>
  <div class="col border bg-primary">Col 6</div>
  <div class="col border bg-primary">Col 7</div>
</div>
</div>

于 2021-05-17T17:37:30.967 回答
-3 
var cols = $(".container .item").length;
if (cols == 5){
    $('div.item').removeClass('col-md-2..etc').addClass('col-md-3').css('width', '20%');
 }

Jquery 和完成！框架！

于 2015-01-27T08:27:34.983 回答