五列显然不是bootstrap设计的一部分。

但是对于Bootstrap v4 (alpha)，有两件事可以帮助处理复杂的网格布局

Flex (http://v4-alpha.getbootstrap.com/getting-started/flexbox/)，新的元素类型(官方- https://www.w3.org/TR/css-flexbox-1/) 响应式实用程序(http://v4-alpha.getbootstrap.com/layout/responsive-utilities/)

简单来说，我在用

<style>
.flexc { display: flex; align-items: center; padding: 0; justify-content: center; }
.flexc a { display: block; flex: auto; text-align: center; flex-basis: 0; }
</style>
<div class="container flexc hidden-sm-down">
  <!-- content to show in MD and larger viewport -->
  <a href="#">Link/Col 1</a>
  <a href="#">Link/Col 2</a>
  <a href="#">Link/Col 3</a>
  <a href="#">Link/Col 4</a>
  <a href="#">Link/Col 5</a>
</div>
<div class="container hidden-md-up">
  <!-- content to show in SM and smaller viewport, I don't think 5 cols in smaller viewport are gonna be alright :) -->
</div>

不管是5 7 9 11 13还是其他概率，都没问题。 我非常确定12网格标准能够服务于90%以上的用例——所以让我们以这种方式设计——也更容易开发!

flex教程在这里“https://css-tricks.com/snippets/css/a-guide-to-flexbox/”

保持原始的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/

如果使用bootstrap 4和SASS (+ bootstrap变量)，您可以使用以下简化的答案:

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

  .col#{$infix}-fifth {
    @extend %grid-column;
  }

  @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
    .col#{$infix}-fifth {
      flex: 0 0 20%;
      max-width: 20%;
    }
  }
}

还支持断点，您可以简单地添加新的.col#{$infix}-xxx类

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

更多信息请阅读官方文档

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

Jquery和完成!框架!

最简单的方法是在行中添加row-cols-5。点击这里阅读更多

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

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> <div class="container"> <div class="row row-cols-5"> <div class="col border bg-primary">Col 1</div> <div class="col border bg-primary">Col 2</div> <div class="col border bg-primary">Col 3</div> <div class="col border bg-primary">Col 4</div> <div class="col border bg-primary">Col 5</div> <div class="col border bg-primary">Col 6</div> <div class="col border bg-primary">Col 7</div> </div> </div>