我想知道在 Bootstrap 中创建 5 列布局并为这些 div 提供边框和间距的最佳方法是什么。
我创建了一个新类来使网格适合 5 列,如下所示:
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
position: relative;
min-height: 1px;
}
.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;
}
}
<div class="item col-md-15">
<div class="item-wrap">
.....
</div>
</div>
我尝试做的是给每列右侧 10px 的边距(最后一列除外)。此外,我想给每列或 item-wrap
一个 1px 边框。
无论我尝试什么,我总是没有余地。
.item {
border: 1px solid #efefef;
padding:10px;
}
.item.last {
margin-right: 0;
}
查看我的fiddle
最佳答案
目前,原生 Bootstrap 不支持 5、7 和 9 列布局,因为默认的 12 列结构不能被这些数字整除。为了获得 5 列布局,您需要访问 http://getbootstrap.com/customize/#grid-system并将 @grid-columns
值修改为 15(或者实际上是任何能被 5 整除的值)。
自定义并下载个人版本的 Bootstrap 后,您可以使用以下方法实现 5 列布局:
<div class="col-xs-3">Column 1</div>
<div class="col-xs-3">Column 2</div>
<div class="col-xs-3">Column 3</div>
<div class="col-xs-3">Column 4</div>
<div class="col-xs-3">Column 5</div>
而且您不必搞乱 CSS 来尝试模仿现有的 Bootstrap 类和样式。请谨慎使用此方法,因为任何现有的柱状布局都可能会受到此更改的影响。
关于html - Bootstrap 带边框的 5 列布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34440440/