我想在我正在构建的页面上有5个相等的列,我似乎无法理解5列网格在这里是如何使用的: http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/responsive
上面演示的五列网格是twitter引导框架的一部分吗?
我想在我正在构建的页面上有5个相等的列,我似乎无法理解5列网格在这里是如何使用的: http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/responsive
上面演示的五列网格是twitter引导框架的一部分吗?
当前回答
在我的例子中,仅仅使用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>
注意,我添加了一个媒体查询,语句周围的代码更少。因此,如果您想添加其他列断点类,请确保围绕它使用正确的媒体查询。
其他回答
您可以使用小技巧,使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/
默认情况下,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>
使用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>
我对Mafnah的答案进行了投票,但再看一遍,如果你保持默认的边际,我建议下面的答案更好。
<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: 17.9%;
}
创建5个类为col-sm-2的元素,并在第一个元素中添加类为col-sm-offset-1
附注:这将不是全宽度的(它将从屏幕的左右略微缩进)
代码应该看起来像这样
<div class="col-sm-2 col-sm-offset-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>