带边框的 Bootstrap 5 列布局答案

【问题标题】：Bootstrap 5 column layout with border带边框的 Bootstrap 5 列布局
【发布时间】：2015-12-23 17:00:09
【问题描述】：

我想知道在 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的边距（最后一列offcourse除外）。此外，我想给每一列或item-wrap 一个 1px 的边框。

无论我尝试什么，我总是没有余地。

.item {
  border: 1px solid #efefef;
  padding:10px;
}
.item.last {
  margin-right: 0;
}

见我的fiddle

【问题讨论】：

Bootstrap 基于 12 列网格，那么 col-xs-15、col-sm-15、col-md-15 和 col-lg-15 是什么？
@j08691 他自己上课。他在上面的 OP 中提到了这一点（可能作为更新？）。
@DrewKennedy - 尽管他创建了自己的类，但我看不出它如何适应 Bootstrap 的框架。
@j08691 15 选择的数字很奇怪，但是 Bootstrap 没有通过 col 设计提供 20% 的宽度，所以我可以理解扩展框架以满足需求。这个网站实际上是上面的代码可能是从这里借来的：wearesicc.com/quick-tips-5-column-layout-with-twitter-bootstrap
最佳解决方案：bootstrap 5 column layout

标签： html css twitter-bootstrap

【解决方案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 类和样式。请谨慎使用此方法，因为任何现有的列式布局都可能会受到此更改的影响。

【讨论】：

【解决方案2】：

如果你想给所有的列留出间距，你可以使用伪类来实现：

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

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

【讨论】：

【解决方案3】：

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

Bootstrap-4 构建在 flex-layout 之上。

因此，每当我们有这样的要求时，我们的布局不适合我们 bootstrap-4 的通常的 12 网格布局，我们可以使用我们自定义的 CSS（使用 flexbox 属性）来创建任何数字列响应式布局（在您的case 是 5 列布局），因为 flexbox 为我们提供了很大的灵活性。使用我编写的以下代码来实现这一点。

HTML5：

<!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>

CSS：

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 padding-top: 1rem;
}

/* --- This much code will do it for you --- */
.flex-container {
  display: flex;
 }

.flex-item {
  min-height: 400px;
  border: 4px solid #03a503;
  margin: 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.flex-item:first-of-type,
.flex-item:last-of-type {
  margin-right: 1rem;
}

 /* ----- Basic break-point ----- */
@media screen and (max-width: 768px) {
 .flex-container {
   flex-direction: column;
 }

.flex-item {
  min-height: 100px;
  margin: 0.5rem;
}
.flex-item:first-of-type,
.flex-item:last-of-type {
   margin: 0.5rem;
 }
}

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

希望这段代码能解决问题。

【讨论】：

【解决方案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>

【讨论】：