Bootstrap默认可以缩放到12列?这意味着如果我们想要创建一个宽度相同的12列布局，我们将在div class="col-md-1"中写入12次。

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

与flexbox http://output.jsbin.com/juziwu

.flexrow { 显示:flex; 背景:浅灰色;/ * * /调试 ｝ .flexrow > * { flex: 1; 保证金:1 em; 大纲:自动绿色; ｝ < div class = " flexrow”> < div >…< / div > < div >…< / div > < div >…< / div > < div >。< br >。< / div > < div >…< / div > < / div >

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

用于引导5或更高版本

可以使用row-cols- class名称。

例如:row-col -1, row-col -5, row-col -lg-5

<div class="container">
  <div class="row row-cols-5">
     // place your all cols here
  </div>
</div>

更多信息请阅读官方文档

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

只需创建一个新类，并根据需要定义每个媒体查询的行为

@media(min-width: 768px){
  .col-1-5{
    width: 20%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 5px;
    padding-left: 5px;
  }
}

<div class="container-fluid">
  <div class="row">
    <div class="col-1-5">col 1</div>
    <div class="col-1-5">col 2</div>
    <div class="col-1-5">col 3</div>
    <div class="col-1-5">col 4</div>
    <div class="col-1-5">col 5</div>
  </div>
</div>

这里是一个工作演示https://codepen.io/giorgosk/pen/BRVorW