我想在我正在构建的页面上有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引导框架的一部分吗?
当前回答
在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%;
}
其他回答
用于引导4
Bootstrap 4现在默认使用flexbox,所以你可以直接使用它的神奇力量。查看自动布局列,根据嵌套的列的数量动态调整宽度。
这里有一个例子:
<div class="row">
<div class="col">
1 of 5
</div>
<div class="col">
2 of 5
</div>
<div class="col">
3 of 5
</div>
<div class="col">
4 of 5
</div>
<div class="col">
5 of 5
</div>
</div>
演示工作
引导3
一个奇妙的全宽5列布局与Twitter引导创建在这里。
这是迄今为止最先进的解决方案,因为它与Bootstrap 3无缝地工作。它允许您一遍又一遍地重用这些类,并与当前的Bootstrap类一起用于响应式设计。
CSS: 将其添加到全局样式表中,甚至添加到bootstrap.css文档的底部。
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-5ths {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-5ths {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-5ths {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-5ths {
width: 20%;
float: left;
}
}
好好利用它!例如,如果你想创建一个div元素,它在中等屏幕上表现为五列布局,而在较小的屏幕上表现为两列布局,你只需要使用这样的东西:
<div class="row">
<div class="col-md-5ths col-xs-6">
...
</div>
</div>
工作演示-展开框架,看看列变得有响应。
另一个演示-将新的col-*-5ths类与其他类合并,如col-*-3和col-*-2。调整帧的大小,在响应视图中看到它们都改变为col-xs-6。
它可以通过嵌套和使用一点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个相等的列
在我的例子中,仅仅使用col并没有得到正确的效果。所有项都将出现在彼此旁边,我不想用PHP计算出什么时候放置行元素。
那么如何创建一个类来扩展我们的引导col特性呢?如果人们想知道如何在不使用col类的情况下使5列与Bootstrap一起工作。
插件/ bootstrap.less:
@media @md {
.col-md-2-4 {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
我将其命名为.col-md-2-4,因为Bootstrap的12个网格布局除以5等于2.4。
现在你可以创建一个5列的布局。也可以与其他断点列类结合使用:
<div class="col-6 col-sm-4 col-md-2-4">
1/5 column
</div>
注意,我添加了一个媒体查询,语句周围的代码更少。因此,如果您想添加其他列断点类,请确保围绕它使用正确的媒体查询。
在我看来,像这样使用Less语法更好。 这个答案是基于@fizzix的回答
这样列使用用户可能覆盖的变量(@grid-gutter-width, media breakpoints), 5列的行为与12列网格的行为匹配。
/*
* Special grid for ten columns,
* using its own scope
* so it does not interfere with the rest of the code
*/
& {
@import (multiple) "../bootstrap-3.2.0/less/variables.less";
@grid-columns: 5;
@import (multiple) "../bootstrap-3.2.0/less/mixins.less";
@column: 1;
.col-xs-5ths {
.make-xs-column(@column);
}
.col-sm-5ths {
.make-sm-column(@column);
}
.col-md-5ths {
.make-md-column(@column);
}
.col-lg-5ths {
.make-lg-column(@column);
}
}
/***************************************/
/* Using default bootstrap now
/***************************************/
@import (multiple) "../bootstrap-3.2.0/less/variables.less";
@import (multiple) "../bootstrap-3.2.0/less/mixins.less";
/* ... your normal less definitions */
引导4
我看了所有的答案,没有找到“显而易见的答案”。基本上,您需要做的是选取任何自举列(例如col-2)并编辑一些值。在这个例子中,我使用的是.col-custom类。
5个相等的列表示每个列占用20%,因此:flex:0 0 20%和max-width:20%。同样的方法,你可以创建其他数量的列(7,9,11,84或任何你想要的)。
您可以创建自定义宽度的CSS变量,并在项目中使用它。就像这样:
:root {
--col-custom: 20%;
}
.col-custom {
flex: 0 0 var(--col-custom);
max-width: var(--col-custom);
}
工作的例子:
.col-custom, .col-sm-custom, .col-md-custom, .col-lg-custom, .col-xl-custom { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col-custom { flex: 0 0 20%; max-width: 20%; } @media (min-width: 576px){ .col-sm-custom { flex: 0 0 20%; max-width: 20%; } } @media (min-width: 768px){ .col-md-custom { flex: 0 0 20%; max-width: 20%; } } @media (min-width: 992px){ .col-lg-custom { flex: 0 0 20%; max-width: 20%; } } @media (min-width: 1200px){ .col-xl-custom { flex: 0 0 20%; max-width: 20%; } } /*DEMO*/ .col-custom,.col-sm-custom,.col-md-custom,.col-lg-custom,.col-xl-custom{height:100px;border:1px red solid} <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <div class="container-fluid"> <div class="row"> <div class="col-sm-custom"></div> <div class="col-sm-custom"></div> <div class="col-sm-custom"></div> <div class="col-sm-custom"></div> <div class="col-sm-custom"></div> </div> </div>