twitter bootstrap 中的五个相等的列

S

Suraj Rao

对于引导程序 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 表示 1/5，col-md-2ths 表示 2/5，col-md-5ths 表示 5/5 = 全宽？

S

Stone

使用五个具有 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：stackoverflow.com/a/42226652/171456

l

lightswitch05

对于 Bootstrap 3，如果您想要 full-width 并使用 LESS、SASS 或类似的东西，您所要做的就是使用 {1 } 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 方工具或现有样式。

最干净的解决方案，因为 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 函数解决了这个问题。如果您愿意，我可以更新您的答案以包含此内容？

Z

Zim

2019 年更新

引导 4.1+

以下是使用 auto-layout grid 的 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。您可以使用分隔符（例如每 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，因为（自动）列可能超过父宽度。

s

sergserg

下面是 @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 只是一瞥；在此页面上查看另一个答案：stackoverflow.com/questions/10387740/…

m

machineaddict

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

D

DraggonZ

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

C

Community

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

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

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

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

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

c

caub

使用弹性框 http://output.jsbin.com/juziwu

.flexrow { 显示：弹性；背景：浅灰色； /*用于调试*/ } .flexrow > * { flex: 1;保证金：1em；轮廓：自动绿色； }

...

...
..

...

如果满足您的需求，flexbox 比 bootstrap 更好。

P

Praveen Kumar Purushothaman

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

...它不工作。除第一列外，每一列都有剩余边距。

P

Paul D. Waite

我投票赞成 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 查询中的每一列设置一个新的边距。

a

agDev

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

这是我为这个问题选择的解决方案。我相信这在引导程序 3,4 和 5 中效果很好。

d

daGUY

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>

d

djibe

对于引导 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%}。行列-md-3>*{-ms -flex:0 0 33.333333%;flex:0 0 33.333333%;最大宽度: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%;最大宽度:20%}.row-cols-lg-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;最大宽度:16.666667%}}@媒体 (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%}。 r ow-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%；弹性：0 0 16.666667%；最大宽度：16.666667%}}

h

hossein naghneh

最好的方法

仅将 .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);
  }
}

C

Chaoyu

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

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

M

Manish Verma

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>

b

bradrice

它可以通过嵌套和使用一点 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

C

Community

在我看来，最好将它与 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 */

h

herrfischer

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

做就是了：

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

和 CSS：

.col-xs-15{
    width:20%;
}

b

byteC0de

默认情况下，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>

S

Sanjib Debnath

具有 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;
    }
}

n

nicolallias

一个不需要大量 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*/
  }
}

G

GiorgosK

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

@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

J

Jakub Muda

引导程序 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 { 位置：相对；宽度：100%； padding-right: 15px;填充左：15px； } .col-custom { 弹性：0 0 20%;最大宽度：20%； } @media (min-width: 576px){ .col-sm-custom { flex: 0 0 20%;最大宽度：20%； } } @media (最小宽度: 768px){ .col-md-custom { flex: 0 0 20%;最大宽度：20%； } } @media (最小宽度: 992px){ .col-lg-custom { flex: 0 0 20%;最大宽度：20%； } } @media (最小宽度: 1200px){ .col-xl-custom { flex: 0 0 20%;最大宽度：20%； } } /*DEMO*/ .col-custom,.col-sm-custom,.col-md-custom,.col-lg-custom,.col-xl-custom{height:100px;border:1px red solid}

R

Rajitha Udayanga

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

有关详细信息，请阅读 official docs

g

guaph

在引导程序 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%;
}

R

Robind Kumar

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

.col-lg-1-5,.col-md-1-5,.col-sm-1-5,.col-xs-1-5{min-height:1px;padding-left:15px;padding-右：15px；位置：相对；宽度：100%；框尺寸：边框框；} .item{宽度：100%；高度：100px；背景颜色：#cfcfcf；} .col-xs-1-5{宽度：20%；浮动：左；} } @media（最小宽度：767px）{ .col-sm-1-5{宽度：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;} }

第 1 项

第2项

项目 3

项目 4

第5项

V

Vikas Baru

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

g

gonatee

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

但是使用 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/”

twitter bootstrap 中的五个相等的列

关注公众号

想领先一步获取最新的外包任务吗？

相似问题

平台

支持

友情链接

联系我们