我想在我正在构建的页面上有5个相等的列，我似乎无法理解5列网格在这里是如何使用的: http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/responsive
上面演示的五列网格是twitter引导框架的一部分吗?
当前回答
只需创建一个新类，并根据需要定义每个媒体查询的行为
@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
其他回答
使用5个div，类为span2，并给第一个类为offset1。
<div class="row-fluid">
<div class="span2 offset1"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
</div>
瞧! 五列等距居中。
在引导3.0中，这段代码看起来像
<div class="row">
<div class="col-md-2 col-md-offset-1"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
更新
因为bootstrap 4.0默认使用Flexbox:
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
如果使用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类
默认情况下，Bootstrap不提供允许我们创建五列布局的网格系统，您需要按照Bootstrap的方式创建默认列定义 在CSS文件中创建一些自定义类和媒体查询
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}
.col-xs-15 {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-15 {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-15 {
width: 20%;
float: left;
}
}
还有一些HTML代码
<div class="row">
<div class="col-md-15 col-sm-3">
...
</div>
</div>
您可以使用小技巧，使colo -md-2与偏移解决方案全宽。它使用bootstrap删除(隐藏)15px填充的方法。
我的意思是添加“-”页边距。实际上是calc(-10% - 15px);两边都有空白。(10%为偏移宽度，15px为填充)。
唯一的缺点是它会使页面水平滚动，所以你需要在父行中隐藏overflow-x:。
css:
.row-xs-5 {
margin-left: calc(-10% - 15px);
margin-right: calc(-10% - 15px);
}
@media (min-width: 768px) {
.row-sm-5 {
margin-left: calc(-10% - 15px);
margin-right: calc(-10% - 15px);
}
}
@media (min-width: 992px) {
.row-md-5 {
margin-left: calc(-10% - 15px);
margin-right: calc(-10% - 15px);
}
}
@media (min-width: 1200px) {
.row-lg-5 {
margin-left: calc(-10% - 15px);
margin-right: calc(-10% - 15px);
}
}
html:
<div style="overflow-x:hidden;">
<div class="row row-md-5">
<div class="col-xs-6 col-md-2 col-md-offset-1">col1</div>
<div class="col-xs-6 col-md-2">col2</div>
<div class="col-xs-6 col-md-2">col3</div>
<div class="col-xs-6 col-md-2">col4</div>
<div class="col-xs-6 col-md-2 text-right">col5</div>
</div>
</div>
这里是演示:http://jsfiddle.net/sct3j/171/
下面是@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%;
}
}
