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

引导4，每行可变列数

如果你想每行最多有5列，这样每一行的列数仍然只占一行的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>

用于引导5或更高版本

可以使用row-cols- class名称。

例如:row-col -1, row-col -5, row-col -lg-5

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

更多信息请阅读官方文档

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

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

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

瞧! 五列等距居中。

在引导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>