我想在我正在构建的页面上有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引导框架的一部分吗?
当前回答
引导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>
其他回答
.col-xs-2-4 { position: relative; float: left; width: 20%; min-height: 1px; padding-left: 15px; padding-right: 15px; } .col-sm-2-4 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } @media (min-width: 768px) { .col-sm-2-4 { float: left; width: 20%; } } .col-md-2-4 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } @media (min-width: 992px) { .col-md-2-4 { float: left; width: 20%; } } .col-lg-2-4 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } @media (min-width: 1200px) { .col-lg-2-4 { float: left; width: 20%; } }
这个很棒:http://www.ianmccullough.net/5-column-bootstrap-layout/
只做:
<div class="col-xs-2 col-xs-15">
和CSS:
.col-xs-15{
width:20%;
}
.col-half-offset{
margin-left:4.166666667% !important;
float: left;
}
<div className="row1 marginTop20">
<div className="col-xs-12 col-sm-2 col-md-2">
1
</div>
<div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
2
</div>
<div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
3
</div>
<div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
4
</div>
<div className="col-xs-12 col-sm-2 col-md-2 col-half-offset">
5
</div>
<div className="clearfix"></div>
</div>
我对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%;
}
不需要编辑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块。希望这能帮助到一些人。