我想在我正在构建的页面上有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引导框架的一部分吗?
当前回答
<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: 20%;
}
其他回答
如果你不需要完全相同的列宽度,你可以尝试使用嵌套创建5列:
<div class="container">
<div class="row">
<div class="col-xs-5">
<div class="row">
<div class="col-xs-6 column">Column 1</div>
<div class="col-xs-6 column">Column 2</div>
</div>
</div>
<div class="col-xs-7">
<div class="row">
<div class="col-xs-4 column">Column 3</div>
<div class="col-xs-4 column">Column 4</div>
<div class="col-xs-4 column">Column 5</div>
</div>
</div>
</div>
</div>
斯菲德尔
前两列的宽度为5/12 * 1/2 ~ 20.83%
后三列:7/12 * 1/3 ~ 19.44%
这样的hack在许多情况下给出了可接受的结果,不需要任何CSS更改(我们只使用本机引导类)。
在Bootstrap 3中启用5列的另一种方法是修改Bootstrap默认使用的12列格式。然后创建一个20列的网格(在Bootstrap网站上使用自定义或使用LESS/SASS版本)。
要在引导网站上进行自定义,请访问自定义和下载页面,将变量@grid-columns从12更新为20。然后,您将能够创建4以及5列。
我对这个问题的首选方法是基于make-grid-columns mixin,利用现有的Bootstrap变量创建一个SASS mixin。
// Custom Grid Columns
//
// $name - determines the class names: eg. ".col-5ths, .col-sm-5ths ..."
// $size - determines the width (2.4 is one fifth of 12, the default number of columns)
@mixin custom-grid-columns($name, $size, $grid-columns: $grid-columns, $breakpoints: $grid-breakpoints) {
$columns: round($grid-columns / $size);
%custom-grid-column {
@include make-col-ready();
}
@each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
.col#{$infix}-#{$name} {
@extend %custom-grid-column;
}
@include media-breakpoint-up($breakpoint, $breakpoints) {
// Create column
.col#{$infix}-#{$name} {
@include make-col($size);
}
// Create offset
@if not ($infix=="") {
.offset#{$infix}-#{$name} {
@include make-col-offset($size);
}
}
}
}
}
然后可以调用mixin来生成自定义列类和偏移量类。
@include custom-grid-columns('5ths', 2.4);
与flexbox http://output.jsbin.com/juziwu
.flexrow { 显示:flex; 背景:浅灰色;/ * * /调试 } .flexrow > * { flex: 1; 保证金:1 em; 大纲:自动绿色; } < div class = " flexrow”> < div >…< / div > < div >…< / div > < div >…< / div > < div >。< br >。< / div > < div >…< / div > < / div >
自举网格系统分为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;
}