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

Answer 2

如果要为所有列提供间距边距，可以使用伪类来实现此目的：

.item:not(:last-child) {
    margin-right:10px;
}

基本上，除了最后一个元素外，这将为.item类的所有元素赋予右边距。 Here是你更新的小提琴。

Answer 3

随着 bootstrap-4 的发布，我们看到了许多新功能和随之而来的更改。其中一项更改是删除浮点数和百分比，并在bootstrap-4中使用 flex-box 布局。

Bootstrap-4构建在弹性布局上。

因此，只要我们的布局不适合bootstrap-4的常规12网格布局，我们就可以使用自定义CSS（使用flexbox属性）来创建任何数字列响应式布局（在您的例（5列布局），因为flexbox在执行此操作时具有很大的灵活性。使用下面编写的代码来实现此目的。

HTML5：

master..upstream/master

CSS：

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <link rel="stylesheet" href="./style.css" />
   <title>5 column layout in flexbox</title>
</head>

<body>
 <main class="flex-container">
  <div class="flex-item col1">col1</div>
  <div class="flex-item col2">col1</div>
  <div class="flex-item col3">col3</div>
  <div class="flex-item col4">col4</div>
  <div class="flex-item col5">col5</div>
 </main>
</body>
</html>

这是完整的代码https://jsfiddle.net/cLmq0otv/3/

希望此代码可以解决问题。

Answer 4

您必须使用Auto-layout columns，没有显式编号的列类。您可以使用预定义的网格类，网格混合或内联宽度来设置width of one column，并让同级列自动调整大小。

.col{
padding:1rem;
}
.col div{
  border:1px solid red;
  min-height:5rem;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col">
      <div>content column 1</div>
    </div>
    <div class="col">
      <div>content column 2</div>
    </div>
    <div class="col">
      <div>content column 3</div>
    </div>
    <div class="col">
      <div>content column 4</div>
    </div>
    <div class="col">
      <div>content column 5</div>
    </div>
  </div>
</div>

带边框的Bootstrap 5列布局

4 个答案: