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>

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

五列显然不是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/”

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

更新:现在最好使用flexbox

Boostrap今天提供了用内置类均匀填充一行的可能性，这些内置类不告诉十二列中有多少列要跨度:

你可以使用col/col-xx:

div div div { border: solid; margin: 2px;/* this can be added without breaking the row */ } div div div:before { content:attr(class);/* show class used */ color:crimson <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> <p>Class used , play snippet in full page to test behavior on resizing :</p> <div class="container"> <div class="row"> <div class="col-sm"></div> <div class="col-sm"></div> <div class="col-sm"></div> <div class="col-sm"></div> <div class="col-sm"></div> </div> <div class="row"> <div class="col-md"></div> <div class="col-md"></div> <div class="col-md"></div> <div class="col-md"></div> <div class="col-md"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> </div>

Flex-grow-x也可以使用

div div div { border: solid; /* it allows margins too */ margin: 3px; } div div div:before { content: attr(class); /* show class used */ color: crimson } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="flex-grow-1"></div> <div class="flex-grow-1"></div> <div class="flex-grow-1"></div> <div class="flex-grow-1"></div> <div class="flex-grow-1"></div> </div> </div>

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

只做:

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

和CSS:

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