我想在我正在构建的页面上有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%;
}
}
其他回答
只需创建一个新类,并根据需要定义每个媒体查询的行为
@media(min-width: 768px){
.col-1-5{
width: 20%;
float: left;
position: relative;
min-height: 1px;
padding-right: 5px;
padding-left: 5px;
}
}
<div class="container-fluid">
<div class="row">
<div class="col-1-5">col 1</div>
<div class="col-1-5">col 2</div>
<div class="col-1-5">col 3</div>
<div class="col-1-5">col 4</div>
<div class="col-1-5">col 5</div>
</div>
</div>
这里是一个工作演示https://codepen.io/giorgosk/pen/BRVorW
我对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%;
}
<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%;
}
我对这个问题的首选方法是基于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);
在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%;
}