我想在我正在构建的页面上有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引导框架的一部分吗?
当前回答
与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 >
其他回答
如果使用bootstrap 4和SASS (+ bootstrap变量),您可以使用以下简化的答案:
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.col#{$infix}-fifth {
@extend %grid-column;
}
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
.col#{$infix}-fifth {
flex: 0 0 20%;
max-width: 20%;
}
}
}
还支持断点,您可以简单地添加新的.col#{$infix}-xxx类
使用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>
一个解决方案,不需要大量的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*/
}
}
引导4,每行可变列数
如果你想每行最多有5列,这样每一行的列数仍然只占一行的1/5,解决方案是使用Bootstrap 4的mixins:
SCSS:
.col-2-4 {
@include make-col-ready(); // apply standard column margins, padding, etc.
@include make-col(2.4); // 12/5 = 2.4
}
.col-sm-2-4 {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(2.4);
}
}
.col-md-2-4 {
@include make-col-ready();
@include media-breakpoint-up(md) {
@include make-col(2.4);
}
}
.col-lg-2-4 {
@include make-col-ready();
@include media-breakpoint-up(lg) {
@include make-col(2.4);
}
}
.col-xl-2-4 {
@include make-col-ready();
@include media-breakpoint-up(xl) {
@include make-col(2.4);
}
}
HTML:
<div class="container">
<div class="row">
<div class="col-12 col-sm-2-4">1 of 5</div>
<div class="col-12 col-sm-2-4">2 of 5</div>
<div class="col-12 col-sm-2-4">3 of 5</div>
<div class="col-12 col-sm-2-4">4 of 5</div>
<div class="col-12 col-sm-2-4">5 of 5</div>
</div>
<div class="row">
<div class="col-12 col-sm-2-4">1 of 2</div> <!-- same width as column "1 of 5" above -->
<div class="col-12 col-sm-2-4">2 of 2</div> <!-- same width as column "2 of 5" above -->
</div>
</div>
在bootstrap v4.3.1中,它是一个12 / 5 = 2.4列宽的列。我们称它为col-2dot4(以及col-sm-2dot4, col-md-2dot4,…)
每一列应该有20%的可用空间。
SCSS代码如下所示:
@mixin make-5-grid-column($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
// Common properties for all breakpoints
%grid-column {
position: relative;
width: 100%;
padding-right: $gutter / 2;
padding-left: $gutter / 2;
}
@each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
.col#{$infix}-2dot4 {
@extend %grid-column;
}
.col#{$infix},
.col#{$infix}-auto {
@extend %grid-column;
}
@include media-breakpoint-up($breakpoint, $breakpoints) {
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
.col#{$infix} {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
.col#{$infix}-auto {
flex: 0 0 auto;
width: auto;
max-width: 100%; // Reset earlier grid tiers
}
.col#{$infix}-2dot4 {
@include make-col(1, 5);
}
}
}
}
@if $enable-grid-classes {
@include make-5-grid-column();
}