Bootstrap或其他网格系统并不总是意味着更简单和更好。 在你的.container或.row(保持你的响应式布局)中，你可以创建5个div(使用类.col f.e.)，并像这样添加css: .col { 宽度:20%; 浮:左 };

更新:现在最好使用flexbox

在我的例子中，仅仅使用col并没有得到正确的效果。所有项都将出现在彼此旁边，我不想用PHP计算出什么时候放置行元素。

那么如何创建一个类来扩展我们的引导col特性呢?如果人们想知道如何在不使用col类的情况下使5列与Bootstrap一起工作。

插件/ bootstrap.less:

@media @md {
    .col-md-2-4 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

我将其命名为.col-md-2-4，因为Bootstrap的12个网格布局除以5等于2.4。

现在你可以创建一个5列的布局。也可以与其他断点列类结合使用:

<div class="col-6 col-sm-4 col-md-2-4">
   1/5 column
</div>

注意，我添加了一个媒体查询，语句周围的代码更少。因此，如果您想添加其他列断点类，请确保围绕它使用正确的媒体查询。

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

如果你不需要完全相同的列宽度，你可以尝试使用嵌套创建5列:

<div class="container">
    <div class="row">
        <div class="col-xs-5">
            <div class="row">
                <div class="col-xs-6 column">Column 1</div>
                <div class="col-xs-6 column">Column 2</div>
            </div>
        </div>
        <div class="col-xs-7">
            <div class="row">
                <div class="col-xs-4 column">Column 3</div>
                <div class="col-xs-4 column">Column 4</div>
                <div class="col-xs-4 column">Column 5</div>
            </div>
        </div>
    </div>
</div>

斯菲德尔

前两列的宽度为5/12 * 1/2 ~ 20.83%

后三列:7/12 * 1/3 ~ 19.44%

这样的hack在许多情况下给出了可接受的结果，不需要任何CSS更改(我们只使用本机引导类)。

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

Jquery和完成!框架!

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