最好的方法

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

您可以使用小技巧，使colo -md-2与偏移解决方案全宽。它使用bootstrap删除(隐藏)15px填充的方法。

我的意思是添加“-”页边距。实际上是calc(-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/

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

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

要在引导网站上进行自定义，请访问自定义和下载页面，将变量@grid-columns从12更新为20。然后，您将能够创建4以及5列。

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

5列布局与Twitter引导风格

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