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

我对Mafnah的答案进行了投票，但再看一遍，如果你保持默认的边际，我建议下面的答案更好。

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

我对这个问题的首选方法是基于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);

用于引导4

Bootstrap 4现在默认使用flexbox，所以你可以直接使用它的神奇力量。查看自动布局列，根据嵌套的列的数量动态调整宽度。

这里有一个例子:

<div class="row">
   <div class="col">
      1 of 5
   </div>
   <div class="col">
      2 of 5
   </div>
   <div class="col">
      3 of 5
   </div>
   <div class="col">
      4 of 5
   </div>
   <div class="col">
      5 of 5
   </div>
</div>

演示工作

引导3

一个奇妙的全宽5列布局与Twitter引导创建在这里。

这是迄今为止最先进的解决方案，因为它与Bootstrap 3无缝地工作。它允许您一遍又一遍地重用这些类，并与当前的Bootstrap类一起用于响应式设计。

CSS: 将其添加到全局样式表中，甚至添加到bootstrap.css文档的底部。

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

好好利用它!例如，如果你想创建一个div元素，它在中等屏幕上表现为五列布局，而在较小的屏幕上表现为两列布局，你只需要使用这样的东西:

<div class="row">
    <div class="col-md-5ths col-xs-6">
       ...
    </div>
</div>

工作演示-展开框架，看看列变得有响应。

另一个演示-将新的col-*-5ths类与其他类合并，如col-*-3和col-*-2。调整帧的大小，在响应视图中看到它们都改变为col-xs-6。

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

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

对于@lightswitch的回答，如果我们需要使用更少迭代的5列网格

.make-fifth-col(@index) when (@index > 0) {
  @class-name: ~".col-md-5th-@{index}";

  @{class-name} {
    .make-md-column(1.2*@index);
  }

  .make-fifth-col(@index - 1);
}

.make-fifth-col(10);

这将生成css类。col-md-5th-1, col-md-5th-2, col-md-5th-3，等等，对应10%，20%，30%…分别