我想在我正在构建的页面上有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引导框架的一部分吗?
当前回答
5列布局与Twitter引导风格
.col-xs-15 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}
.col-xs-15 {
width: 100%;
float: left;
}
@media (min-width: 768px) {
.col-xs-15 {
width: 50%;
float: left;
}
}
@media (min-width: 992px) {
.col-xs-15 {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-xs-15 {
width: 20%;
float: left;
}
}
其他回答
与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 >
为5列布局创建自定义引导下载
进入Bootstrap 2.3.2(或Bootstrap 3)自定义页面,设置以下变量(不要输入分号):
@gridColumns: 5;
@gridColumnWidth: 172px;
@gridColumnWidth1200: 210px;
@gridColumnWidth768: 128px;
@gridGutterWidth768: 21px;
下载您的构建。这个网格将适合默认的容器,(几乎)保留默认的沟槽宽度。
注意:如果你使用LESS,更新变量。而不是更少。
如果你不需要完全相同的列宽度,你可以尝试使用嵌套创建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更改(我们只使用本机引导类)。
创建5个类为col-sm-2的元素,并在第一个元素中添加类为col-sm-offset-1
<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 { 宽度:17.9%; }
附注:这将不是全宽度(它将从屏幕的左右稍微缩进)。
代码应该看起来像这样。
我对这个问题的首选方法是基于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);