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>

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

Jquery和完成!框架!

我对这个问题的首选方法是基于make-grid-columns mixin，利用现有的Bootstrap变量创建一个SASS mixin。

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

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

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

这是我写的关于代码墙的全部内容

在bootstrap 3中有5个相等的列

最好的方法

只在行中添加.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);
  }
}