我想在我正在构建的页面上有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引导框架的一部分吗?
当前回答
var cols = $(".container .item").length;
if (cols == 5){
$('div.item').removeClass('col-md-2..etc').addClass('col-md-3').css('width', '20%');
}
Jquery和完成!框架!
其他回答
不需要编辑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块。希望这能帮助到一些人。
对于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 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();
}
我对Mafnah的答案进行了投票,但再看一遍,如果你保持默认的边际,我建议下面的答案更好。
<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: 17.9%;
}
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>