我想在我正在构建的页面上有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引导框架的一部分吗?
当前回答
您可以使用小技巧,使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/
其他回答
用于引导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。
在我看来,像这样使用Less语法更好。 这个答案是基于@fizzix的回答
这样列使用用户可能覆盖的变量(@grid-gutter-width, media breakpoints), 5列的行为与12列网格的行为匹配。
/*
* Special grid for ten columns,
* using its own scope
* so it does not interfere with the rest of the code
*/
& {
@import (multiple) "../bootstrap-3.2.0/less/variables.less";
@grid-columns: 5;
@import (multiple) "../bootstrap-3.2.0/less/mixins.less";
@column: 1;
.col-xs-5ths {
.make-xs-column(@column);
}
.col-sm-5ths {
.make-sm-column(@column);
}
.col-md-5ths {
.make-md-column(@column);
}
.col-lg-5ths {
.make-lg-column(@column);
}
}
/***************************************/
/* Using default bootstrap now
/***************************************/
@import (multiple) "../bootstrap-3.2.0/less/variables.less";
@import (multiple) "../bootstrap-3.2.0/less/mixins.less";
/* ... your normal less definitions */
为5列布局创建自定义引导下载
进入Bootstrap 2.3.2(或Bootstrap 3)自定义页面,设置以下变量(不要输入分号):
@gridColumns: 5;
@gridColumnWidth: 172px;
@gridColumnWidth1200: 210px;
@gridColumnWidth768: 128px;
@gridGutterWidth768: 21px;
下载您的构建。这个网格将适合默认的容器,(几乎)保留默认的沟槽宽度。
注意:如果你使用LESS,更新变量。而不是更少。
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>
下面是@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%;
}
}