我想在我正在构建的页面上有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引导框架的一部分吗?
当前回答
对于twitter bootstrap 3,这是最简单的方法来实现这一点:
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
其他回答
为5列布局创建自定义引导下载
进入Bootstrap 2.3.2(或Bootstrap 3)自定义页面,设置以下变量(不要输入分号):
@gridColumns: 5;
@gridColumnWidth: 172px;
@gridColumnWidth1200: 210px;
@gridColumnWidth768: 128px;
@gridGutterWidth768: 21px;
下载您的构建。这个网格将适合默认的容器,(几乎)保留默认的沟槽宽度。
注意:如果你使用LESS,更新变量。而不是更少。
它可以通过嵌套和使用一点css覆盖来完成。
<div class="col-sm-12">
<div class="row">
<div class="col-sm-7 five-three">
<div class="row">
<div class="col-sm-4">
Column 1
</div>
<div class="col-sm-4">
Column 2
</div>
<div class="col-sm-4">
Column 3
</div><!-- end inner row -->
</div>
</div>
<div class="col-sm-5 five-two">
<div class="row">
<div class="col-sm-6">
Col 4
</div>
<div class="col-sm-6">
Col 5
</div>
</div><!-- end inner row -->
</div>
</div><!-- end outer row -->
然后是css
@media (min-width: 768px) {
div.col-sm-7.five-three {
width: 60% !important;
}
div.col-sm-5.five-two {
width: 40% !important;
}
}
下面是一个例子:5等列的例子
这是我写的关于代码墙的全部内容
在bootstrap 3中有5个相等的列
如果使用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类
默认情况下,Bootstrap不提供允许我们创建五列布局的网格系统,您需要按照Bootstrap的方式创建默认列定义 在CSS文件中创建一些自定义类和媒体查询
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}
.col-xs-15 {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-15 {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-15 {
width: 20%;
float: left;
}
}
还有一些HTML代码
<div class="row">
<div class="col-md-15 col-sm-3">
...
</div>
</div>
对于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列布局,因此它不会破坏任何第三方工具或现有样式。