Twitter引导程序中的五个相等的列

361

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

在Twitter引导程序框架的上方是否演示了五列网格？

twitter-bootstrap  twitter-bootstrap-3  bootstrap-4 
— 甘道夫
source
您正在查看引导程序的非常旧的版本。您是否希望在最新的引导程序上使用5列“响应式”网格？
— 安德烈斯·伊利希
3
我刚刚意识到。声明的是v1.3.0，当前的是2.0.2。最新版本是12列网格，这意味着我可以有2,3,4和6相等的列。我在问的是，如果可能有5个相等的列，而无需进行很多更改。
— 甘道夫
您可以，是的，但是它将需要对某些网格元素以及响应式网格元素进行大量修改。您的网站是否具有响应能力？这样想出答案会容易一些，否则将需要很多代码。
— 安德烈斯·伊利希
是的，该站点是响应式的，但我也必须修改网格元素，而不能仅修改响应式部分。
— 甘道夫
1
.container.one-fifth.column {width：17％; }尽管我希望有一些很棒的事情能使我屏住呼吸。17.87847％也是如此。
— 甘道夫

Answers:

406

将五个div与span2类一起使用，并为第一个给定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>
— jkofron.e
source
44
它不会全宽。不过很好
— machineaddict
45
我发布的解决方案全宽并创建5个相等的列：HERES IS THE ANSWER。
— Fizzix 2014年
5
不像@fizzix在下面提供的答案那样全角。使得两侧都产生多余的余量，就像这样-jsfiddle.net/wdo8L1ww
— Fizzix 2014年
3
这种解决方案的情况下，列看起来很小，所以我更喜欢@fizzix解决方案
— dc2009 2014年
2
Bootstrap 4 5 cols（全角）不需要CSS或SASS：stackoverflow.com/a/42226652/171456
— Zim
526

对于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在响应视图中查看它们全部变为。

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

工作演示

— Fizzix
source
1
打电话给他们col-*-15可能会造成混乱。似乎暗示它们属于15列网格系统的一部分，不是。
— Paul D. Waite
2
@ PaulD.Waite-我在回答中添加了一条便条，以告知人们。
— Fizzix
2
col-*-15对我来说很好，但col-*-5ths列名称可能会稍微混乱一些。那就是我正在使用的，这样我的其他开发人员就不会感到困惑。
— Mordred 2014年
3
嘿@scragar-如果查看所有Bootstrap当前列类的样式，则会注意到它们都包含position:relative; min-height: 1px; padding-right: 15px; padding-left: 15px;。基本上，我发布的代码只是对此进行扩展，以便它们与Bootstrap的内置样式完全匹配。然后，我将宽度设置为，20%以使5个相等的列可以容纳整个页面。非常简单:)
— Fizzix 2014年
1
如何为2/5列命名？或者我们应该使用：col-md-1ths表示1/5，col-md-2ths表示2/5，col-md-5ths表示5/5 =全角？
— 亚历克斯
166

对于自举3，如果你想全宽度和使用LESS，SASS或者类似的东西，你所要做的就是用引导的混入的功能 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)
}

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

您不仅可以建立真正的全宽度的引导柱类使用这些混入，但你也可以建立所有相关的辅助类一样.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)
}

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列布局，因此不会破坏任何第3方工具或现有样式。

— lightswitch05
source
5
最干净的解决方案（等于2.412（5 2.4*5=12）的5 ）适用于12列网格中的Bootstrap 3。也适用于make-xs，make-sm但不能与其他标准col定义结合使用（最新优先）
— Sherbrow 2014年
6
我对这个答案的投票很少感到震惊。到目前为止，它的安全性最低，不仅使用与其他Bootstrap列类相同的命名约定，而且还使用Bootstrap用于创建自己的列的相同mixins，至少到Bootstrap 4为止，它可能是面向未来的。
— 克里斯·弗里茨
3
这应该是最好的答案。我创建了一个库（包括offset，pull和push）在此基础上为我所用。随意检查出来
— 肯尼·基
1
正如大家所说，是的，现在是正确的答案。@Sherbrow说，他们“将无法正常工作合并到其他标准定义栏”但这不是因为该解决方案在某些方面是错误的，它仅仅是因为12％5 = 0！
— 尼克中号
2
@ lightswitch05不幸的是，这不适合我，因为我有大量的列。如果我只有一列，我仍然希望它成为屏幕的第五个，但是使用Fizzix的答案，单个列将覆盖整个屏幕。我设法使用新的Bootstrap 4 mixin函数解决了这个问题。如果您愿意，我可以更新您的答案以包括此内容？
— Plog
40

更新2019

Bootstrap 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://www.codeply.com/go/MJTglTsq9h

此解决方案有效，因为Bootstrap 4现在是flexbox。您可以.row使用诸如<div class="col-12"></div>或<div class="w-100"></div>每5列之类的分隔符将5列包装在同一列中。

另请参阅：Bootstrap-5列布局

— 齐姆
source
2
等不及要稳定了:)
— nicolallias
2
很好，但仅适用于5个元素的行。如果获得更多，那是错误的。在这里查看我的增强
— djibe
这就是为什么我解释您必须每5列使用一次中断。您的解决方案有效，但需要额外的CSS。
— Zim
还考虑添加flex-nowrap，.row因为（自动）列可能会超出父级宽度。
— Luuk Skeur
31

以下是@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%;
    }
}
— 格子公司
source
我在哪里放置它以及如何使用它？
— sergserg 2013年
1
@Serg 1.将其放在Bootstrap css文件的下面/之后2.将.fivecolumns类添加到.row，然后将五个列与类.col [，-sm，
— -lg
在某些情况下不能达到理想的全宽。
— Fizzix 2014年
为什么没有将col-xs-2添加到声明中？
— 甘德斯2015年
@ganders只是一个视线；在此页面上查看其他答案：stackoverflow.com/questions/10387740/…–
— plaidcorp
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/

— 机器迷
source
10

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

— 德拉贡Z
source
9

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

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

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

下载您的版本。此网格将适合默认容器，并保留默认装订线宽度（几乎）。

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

— 帕夫洛
source
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>
展开摘要

— ub
source
如果满足您的需求，flexbox比bootstrap更好。
— ml242
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%;
}
— Studio4
source
1
实际宽度为17.94872％，并且没有响应，您将必须为所有@media查询中的每一列设置新的边距。
— machineaddict
5 
<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%;
}
— 黑手党
source
1
应该等于.span2 {width：20％; }
— Studio4
...而且它不起作用。除第一列外，其余各列都有边距。
— machineaddict
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>
— 敏捷开发
source
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>
— daGUY
source
4

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

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

— 尼普森
source
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>​<!-- 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上的全部文章

引导程序3中有五个相等的列

— Bradrice
source
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 */
— 体外
source
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>
— byteC0de
source
3

默认情况下，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>
— 曼尼斯·维玛（Manish Verma）
source
3

5列采用Twitter Bootstrap样式的布局

.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;
    }
}
— Sanjib Debnath
source
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*/
  }
}
— 尼古拉利斯
source
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

— 乔戈斯
source
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%;
}
— 瓜瓜
source
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>
展开摘要

— 罗宾·库马尔
source
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块即可。希望这对某人有帮助。

— 维卡斯·巴鲁（Vikas Baru）
source
2

五根柱子显然不是设计所必需的。

但是对于Bootstrap v4（alpha），有2件事可以帮助完成复杂的网格布局

  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/sensitive-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/ ”

— 鹅膏
source
2

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

}

我希望有人会觉得有用

— 纽伦
source
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";
— 维德曼特
source
1
谢谢，这就是我想要的，我现在也获得了1-5分，2-5分，甚至3-10分等，以具有更大的灵活性，非常方便
— morksinaanab 18/09/27
2

对于Bootstrap 4.4+

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

  1. 将row-cols-5课程添加到您的.rowdiv中。无需自定义CSS。
  2. 请参阅4.4文档以获取行cols：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%}}

— 吉贝
source
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%;
  }
}
展开摘要

— 阿鲁斯
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.