一个解决方案，不需要大量的CSS，也不调整bootstrap默认12col布局:

http://jsfiddle.net/0ufdyeur/1/

HTML:

<div class="stretch">
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
</div>

CSS:

@media (min-width: 1200px) { /*if not lg, change this criteria*/
  .stretch{
    width: 120%; /*the actual trick*/
  }
}

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

Jquery和完成!框架!

用于引导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。

下面是@machineaddict和@Mafnah回答的组合，为Bootstrap 3重写(到目前为止对我来说很好):

@media (min-width: 768px){
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2  {
        width: 20%;
        *width: 20%;
    }
}
@media (min-width: 1200px) {
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
        width: 20%;
        *width: 20%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
        width: 20%;
        *width: 20%;
    }
}

如何在引导中添加5列网格

.col-lg-1-5,.col-md-1-5,.col-sm-1-5,.col-xs-1-5{min-height:1px;padding-left:15px;padding-right:15px;position:relative; width:100%;box-sizing:border-box;} .item{width:100%;height:100px; background-color:#cfcfcf;} .col-xs-1-5{width: 20%;float:left;} } @media (min-width: 767px){ .col-sm-1-5{width: 20%;float:left;} } @media (min-width: 992px){ .col-md-1-5{width: 20%;float:left;} } @media (min-width: 1200px){ .col-lg-1-5{width: 20%;float:left;} } <div class="row"> <div class="col-sm-1-5"> <div class="item">Item 1</div> </div> <div class="col-sm-1-5"> <div class="item">Item 2</div> </div> <div class="col-sm-1-5"> <div class="item">Item 3</div> </div> <div class="col-sm-1-5"> <div class="item">Item 4</div> </div> <div class="col-sm-1-5"> <div class="item">Item 5</div> </div> </div>

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