在twitter bootstrap中有五个相等的列

时间：2012-04-30 17:15:28

标签： twitter-bootstrap twitter-bootstrap-3 bootstrap-4

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

五列网格是否在twitter bootstrap框架的上方展示了？

42 个答案:

答案 0 :(得分：472)

对于Bootstrap 3及以上

创建了一个非常棒的全宽 5列布局与Twitter Bootstrap 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。

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

答案 1 :(得分：381)

使用具有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>

答案 2 :(得分：161)

对于 Bootstrap 3 ，如果您想要全宽并且正在使用LESS，SASS或类似内容，那么您只需要要使用Bootstrap's mixin functions make-md-column，make-sm-column等

LESS：

.col-lg-2-4{
  .make-lg-column(2.4)
}
.col-md-2-4{
  .make-md-column(2.4)
}
.col-sm-2-4{
  .make-sm-column(2.4)
}

SASS：

.col-lg-2-4{
  @include make-lg-column(2.4)
}
.col-md-2-4{
  @include make-md-column(2.4)
}
.col-sm-2-4{
  @include make-sm-column(2.4)
}

您不仅可以使用这些mixin构建真正的全宽度引导列类，还可以构建所有相关帮助类，如.col-md-push-*， .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函数将在默认引导列的顶部添加5列布局，因此它不会破坏任何第三方工具或现有样式。

答案 3 :(得分：30)

下面是@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%;
    }
}

答案 4 :(得分：26)

保留原始引导程序有12列，不要自定义它。您需要进行的唯一修改是在原始引导响应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/

答案 5 :(得分：24)

更新2018

Bootstrap 4.0

以下是使用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://www.codeply.com/go/MJTglTsq9h

此解决方案有效，因为Bootstrap 4现在是flexbox。您可以使用clearfix break（例如{5}}或.row每5列将5个列包含在同一<div class="col-12"></div>内。

另见：Bootstrap - 5 column layout

答案 6 :(得分：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％

在许多情况下，这样的hack会提供可接受的结果，并且不需要任何CSS更改（我们只使用本机引导类）。

答案 7 :(得分：8)

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

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

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

下载您的版本。此网格适合默认容器，保留默认的装订线宽度（差不多）。

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

答案 8 :(得分：6)

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

答案 9 :(得分：5)

我投了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%;
}

答案 10 :(得分：4)

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

答案 11 :(得分：4)

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

P.S。这不是全宽（它将从屏幕的右侧和左侧稍微缩进）

代码看起来应该是这样的

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

答案 12 :(得分：3)

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

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

答案 13 :(得分：2)

可以通过嵌套和使用一点css over-ride来完成。

<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

答案 14 :(得分：2)

在我看来，最好像使用Less语法一样使用它。 这个答案基于@fizzix的answer

这样，列使用用户可能覆盖的变量（@ grid-gutter-width，media breakpoints），并且五列的行为与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 */

答案 15 :(得分：2)

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

@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

答案 16 :(得分：2)

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

只是做：

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

和CSS：

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

答案 17 :(得分：2)

一个不需要大量CSS的解决方案，也不需要调整bootstrap默认的12col布局：

http://jsfiddle.net/0ufdyeur/1/

HTML：

#include <stdio.h>
#define vsnptrintf my_test_vsnprintf

CSS：

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

答案 18 :(得分：2)

使用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;
    }
}

答案 19 :(得分：2)

默认情况下，Bootstrap最多可以扩展到12列？这意味着如果我们想要创建一个宽度相等的12列布局，我们会写入div class =＆＃34; col-md-1＆＃34;十二次。

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

答案 20 :(得分：1)

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

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

    3. 简单来说，我正在使用

    <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-grid标准能够满足超过90％的使用案例 - 所以让我们这样设计 - 开发也更容易！

    精彩的flex教程在这里“https://css-tricks.com/snippets/css/a-guide-to-flexbox/”

答案 21 :(得分：1)

有人使用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";

答案 22 :(得分：1)

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

}

我希望有人会发现它很有用

答案 23 :(得分：1)

Bootstrap 4，每行可变列数

如果你希望最多每行五列，那么较少数量的列仍然只占每行的1/5，解决方案是使用Bootstrap 4的{{3 }}：

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>

答案 24 :(得分：1)

最简单的解决方案，无需编辑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阻止。希望这有助于某人。

答案 25 :(得分：1)

如何在bootstrap中添加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>

答案 26 :(得分：1)

对于Bootstrap 4.4 +

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

  1. 将row-cols-5类添加到您的.row div中。无需自定义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%}}

答案 27 :(得分：1)

在bootstrap 3中，我认为我们可以做类似的事情，删除左右边距：

<div class="row this_row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

和CSS 

.this_row {
    margin: 0 -5%;
}

答案 28 :(得分：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>

答案 29 :(得分：0)

在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();
}

答案 30 :(得分：0)

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

答案 31 :(得分：0)

我针对此问题的首选方法是利用基于make-grid-columns混合的现有Bootstrap变量来创建SASS混合。 

// 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);

答案 32 :(得分：0)

最简单的方法是将 row-cols-5 添加到您的行中。 Read more here

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

答案 33 :(得分：0)

仅将 .row-cols-5 类添加到您的行中。所以每行有 5 个 div。

<div class="container-fluid">
    <div class="row row-cols-5">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
        <div class="col">6</div>
        <div class="col">7</div>
        <div class="col">8</div>
        <div class="col">9</div>
        <div class="col">10</div>
    </div>
</div>

使用响应式 .row-cols-* 类快速设置最能呈现您的内容和布局的列数。正常的 .col-* 类应用于单个列（例如 .col-md-4），而行列类在父 .row 上设置为快捷方式。

  • row-cols-*
  • row-cols-sm-*
  • row-cols-md-*
  • row-cols-lg-*
  • row-cols-xl-*

你也可以使用随附的 Sass mixin，row-cols()：

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

答案 34 :(得分：0)

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

答案 35 :(得分：0)

Bootstrap或其他网格系统并不总是意味着更简单和更好。 在你的.container或.row中（为了保持你的响应式布局）你可以创建5个div（使用类.col f.e.）并添加如下的css：
.col { width: 20%; float: left };

答案 36 :(得分：0)

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

我的意思是添加＆＃34; - ＆＃34;利润率。实际上计算（-10％ - 15px）;双方利润率。 （10％是偏移宽度，15px是填充）。

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

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/

答案 37 :(得分：0)

作为分开在12 grid.So我将其分开到两个栅格（7 + 5）。该7和图5是也含有完整的12个grid.Thats为什么我分开引导网格系统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;
}

答案 38 :(得分：0)

即使我们需要使用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);

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

答案 39 :(得分：0)

对于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%;">

答案 40 :(得分：0)

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

答案 41 :(得分：-2)

var cols = $(".container .item").length;
if (cols == 5){
    $('div.item').removeClass('col-md-2..etc').addClass('col-md-3').css('width', '20%');
 }

Jquery和Done！框架！

相关问题
最新问题