html - 带边框的 Bootstrap 5 列布局

Question

我想知道在 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

Answer 1

目前，原生 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 类和样式。请谨慎使用此方法，因为任何现有的柱状布局都可能会受到此更改的影响。