这个很棒:http://www.ianmccullough.net/5-column-bootstrap-layout/

只做:

<div class="col-xs-2 col-xs-15">

和CSS:

.col-xs-15{
    width:20%;
}

更新2019

引导4.1 +

下面是5个相同的全宽列(没有额外的CSS或SASS)，使用自动布局网格:

<div class="container-fluid">
    <div class="row">
        <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>
</div>

http://codeply.com/go/MJTglTsq9h

这个解决方案是有效的，因为Bootstrap 4现在是flexbox。你可以让5列在相同的.row中使用换行符，如<div class="col-12"></div>或<div class="w-100"></div>每5列。

也请参阅:引导- 5列布局

保持原始的12列引导，不要自定义它。你唯一需要做的修改是一些css之后的原始引导响应css，像这样:

下面的代码已经为Bootstrap 2.3.2进行了测试:

<style type="text/css">
/* start of modification for 5 columns */
@media (min-width: 768px){
    .fivecolumns .span2 {
        width: 18.297872340425532%;
        *width: 18.2234042553191494%;
    }
}
@media (min-width: 1200px) {
    .fivecolumns .span2 {
        width: 17.9487179487179488%;
        *width: 17.87424986361156592%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .fivecolumns .span2 {
        width: 17.79005524861878448%;
        *width: 17.7155871635124022%;
    }
}
/* end of modification for 5 columns */
</style>

和html:

<div class="row-fluid fivecolumns">
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
</div>

注意:即使span2乘以5不等于12列，你明白了吧:)

可以在这里找到一个工作示例http://jsfiddle.net/v3Uy5/6/

创建5个类为col-sm-2的元素，并在第一个元素中添加类为col-sm-offset-1

<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 { 宽度:17.9%; ｝

附注:这将不是全宽度(它将从屏幕的左右稍微缩进)。

代码应该看起来像这样。

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

在我的例子中，仅仅使用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>

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