我想在我正在构建的页面上有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-half-offset{
margin-left:4.166666667% !important;
float: left;
}
<div className="row1 marginTop20">
<div className="col-xs-12 col-sm-2 col-md-2">
1
</div>
<div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
2
</div>
<div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
3
</div>
<div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
4
</div>
<div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
5
</div>
<div className="clearfix"></div>
</div>
其他回答
在Bootstrap 3中启用5列的另一种方法是修改Bootstrap默认使用的12列格式。然后创建一个20列的网格(在Bootstrap网站上使用自定义或使用LESS/SASS版本)。
要在引导网站上进行自定义,请访问自定义和下载页面,将变量@grid-columns从12更新为20。然后,您将能够创建4以及5列。
创建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>
不需要编辑CSS的最简单的解决方案是:
<div class="row">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<div class="col-sm-12">Column 1</div>
</div>
<div class="btn-group">
<div class="col-sm-12">Column 2</div>
</div>
<div class="btn-group">
<div class="col-sm-12">Column 3</div>
</div>
<div class="btn-group">
<div class="col-sm-12">Column 4</div>
</div>
<div class="btn-group">
<div class="col-sm-12">Column 5</div>
</div>
</div>
</div>
如果你需要这些打破任何断点,只要使btn-group块。希望这能帮助到一些人。
用于引导4
Bootstrap 4现在默认使用flexbox,所以你可以直接使用它的神奇力量。查看自动布局列,根据嵌套的列的数量动态调整宽度。
这里有一个例子:
<div class="row">
<div class="col">
1 of 5
</div>
<div class="col">
2 of 5
</div>
<div class="col">
3 of 5
</div>
<div class="col">
4 of 5
</div>
<div class="col">
5 of 5
</div>
</div>
演示工作
引导3
一个奇妙的全宽5列布局与Twitter引导创建在这里。
这是迄今为止最先进的解决方案,因为它与Bootstrap 3无缝地工作。它允许您一遍又一遍地重用这些类,并与当前的Bootstrap类一起用于响应式设计。
CSS: 将其添加到全局样式表中,甚至添加到bootstrap.css文档的底部。
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-5ths {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-5ths {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-5ths {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-5ths {
width: 20%;
float: left;
}
}
好好利用它!例如,如果你想创建一个div元素,它在中等屏幕上表现为五列布局,而在较小的屏幕上表现为两列布局,你只需要使用这样的东西:
<div class="row">
<div class="col-md-5ths col-xs-6">
...
</div>
</div>
工作演示-展开框架,看看列变得有响应。
另一个演示-将新的col-*-5ths类与其他类合并,如col-*-3和col-*-2。调整帧的大小,在响应视图中看到它们都改变为col-xs-6。
用于引导4.4+
使用全新的row-cols-n类。
添加row-cols-5类到你的.row div。不需要自定义CSS。 参见4.4文档中的row-cols: https://getbootstrap.com/docs/4.4/layout/grid/#row-columns
对于引导4.4之前的引导4版本
Copy CSS below (awesome CSS by Bootstrap authors) and add it to your project Read the docs cited above to use it correctly. .row-cols-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}@media (min-width:576px){.row-cols-sm-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-sm-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-sm-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-sm-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-sm-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-sm-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:768px){.row-cols-md-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-md-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-md-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-md-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-md-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-md-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:992px){.row-cols-lg-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-lg-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-lg-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-lg-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-lg-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-lg-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:1200px){.row-cols-xl-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-xl-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-xl-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-xl-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-xl-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-xl-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}