我想在我正在构建的页面上有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引导框架的一部分吗?
当前回答
下面是@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%;
}
}
其他回答
自举网格系统分为12个网格。所以我把它分成两个网格(7+5)。这7和5也包含满12格。这就是为什么我分开了7(4+4+4)和5(6+6),这样就可以得到所有的内容,很简单
HTML
<div class="col-sm-12">
<div class="row">
<div class="col-sm-7 five-three">
<div class="row">
<div class="col-sm-4">
Column 1
</div>
<div class="col-sm-4">
Column 2
</div>
<div class="col-sm-4">
Column 3
</div>
</div>
</div>
<div class="col-sm-5 five-two">
<div class="row">
<div class="col-sm-6">
Col 4
</div>
<div class="col-sm-6">
Col 5
</div>
</div>
</div>
</div>
</div>
CSS
div.col-sm-7.five-three {
width: 60% !important;
}
div.col-sm-5.five-two {
width: 40% !important;
}
对于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 3中,我认为我们可以这样做,删除左右边距:
<div class="row this_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>
和CSS
.this_row {
margin: 0 -5%;
}
一个解决方案,不需要大量的CSS,也不调整bootstrap默认12col布局:
http://jsfiddle.net/0ufdyeur/1/
HTML:
<div class="stretch">
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
</div>
CSS:
@media (min-width: 1200px) { /*if not lg, change this criteria*/
.stretch{
width: 120%; /*the actual trick*/
}
}
有人使用bootstrap-sass (v3),下面是使用bootstrap混合的5列的简单代码:
.col-xs-5ths {
@include make-xs-column(2.4);
}
@media (min-width: $screen-sm-min) {
.col-sm-5ths {
@include make-sm-column(2.4);
}
}
@media (min-width: $screen-md-min) {
.col-md-5ths {
@include make-md-column(2.4);
}
}
@media (min-width: $screen-lg-min) {
.col-lg-5ths {
@include make-lg-column(2.4);
}
}
确保你已经包括:
@import "bootstrap/variables";
@import "bootstrap/mixins";