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>

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

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

最简单的方法是在行中添加row-cols-5。点击这里阅读更多

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

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

进入Bootstrap 2.3.2(或Bootstrap 3)自定义页面，设置以下变量(不要输入分号):

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

下载您的构建。这个网格将适合默认的容器，(几乎)保留默认的沟槽宽度。

注意:如果你使用LESS，更新变量。而不是更少。

创建5个类为col-sm-2的元素，并在第一个元素中添加类为col-sm-offset-1

附注:这将不是全宽度的(它将从屏幕的左右略微缩进)

代码应该看起来像这样

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