引导4

我看了所有的答案，没有找到“显而易见的答案”。基本上，您需要做的是选取任何自举列(例如col-2)并编辑一些值。在这个例子中，我使用的是.col-custom类。

5个相等的列表示每个列占用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>

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

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

用于引导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 4和SASS (+ bootstrap变量)，您可以使用以下简化的答案:

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

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