我想在我正在构建的页面上有5个相等的列，我似乎无法理解5列网格在这里是如何使用的: http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/responsive
上面演示的五列网格是twitter引导框架的一部分吗?
当前回答
我对这个问题的首选方法是基于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);
其他回答
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="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个相等的列
创建5个类为col-sm-2的元素，并在第一个元素中添加类为col-sm-offset-1
附注:这将不是全宽度的(它将从屏幕的左右略微缩进)
代码应该看起来像这样
<div class="col-sm-2 col-sm-offset-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
用于引导4.4+
使用全新的row-cols-n类。
添加row-cols-5类到你的.row div。不需要自定义CSS。 参见4.4文档中的row-cols: https://getbootstrap.com/docs/4.4/layout/grid/#row-columns
对于引导4.4之前的引导4版本
Copy CSS below (awesome CSS by Bootstrap authors) and add it to your project Read the docs cited above to use it correctly. .row-cols-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}@media (min-width:576px){.row-cols-sm-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-sm-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-sm-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-sm-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-sm-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-sm-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:768px){.row-cols-md-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-md-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-md-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-md-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-md-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-md-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:992px){.row-cols-lg-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-lg-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-lg-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-lg-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-lg-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-lg-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:1200px){.row-cols-xl-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-xl-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-xl-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-xl-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-xl-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-xl-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}
最好的方法
只在行中添加.row-cols-5类。每一行有5个div。
<div class="container-fluid">
<div class="row row-cols-5">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
<div class="col">10</div>
</div>
</div>
使用响应式.row-cols-*类快速设置最能呈现内容和布局的列数。普通的.col-*类应用于单个列(例如，.col-md-4)，而行列类在父.row上设置为快捷方式。
row-cols - * row-cols-sm - * row-cols-md - * row-cols-lg - * row-cols-xl - *
你也可以使用附带的Sass mixin, row-cols():
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
