Bootstrap - 5 列布局

Question

我正在尝试获得 5 列全宽布局，但我找不到适合我需求的解决方案

这是我使用的代码

  <!-- Content Section -->
    <div class="container">
      <div class="row">
        <div class="col-lg-12" style="border: 1px solid red">
          <div class="row">
            <div class="col-xs-12">
              <div class="col-xs-2 col-xs-offset-1" id="p1">One</div>
              <div class="col-xs-2" id="p2">Two</div>
              <div class="col-xs-2" id="p3">Three</div>
              <div class="col-xs-2" id="p4">Four</div>
              <div class="col-xs-2" id="p5">Five</div>
            </div>
            <!-- //col-lg-12 -->
          </div>
          <!-- //row -->
          lorem
        </div>
      </div>
      <!-- //col-lg-12 -->
    </div>
    <!-- //row -->
  </div>
  <!-- //container -->

结果我得到

这就是我想要实现的目标。全宽 5 列布局，每列之间有空间

Answer 1

5 列 Bootstrap 4

这里有 5 个相等的全宽列（没有额外的 CSS 或 SASS），使用 自动布局网格..

<div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
    </div>
</div>

http://codeply.com/go/MJTglTsq9h

这个解决方案之所以有效，是因为 Bootstrap 4 现在是 Flexbox。您可以使用clearfix 中断（例如每 5 列

.row

或

<div class="col-12"></div>

）将 5 列包裹在同一个

<div class="w-100"></div>

中。

2020 年更新

从 Bootstrap 4.4 开始，您还可以在

row-cols-5

...

 上使用 

row

类

<div class="container">
    <div class="row row-cols-5">
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
    </div>
</div>

https://codeply.com/p/psJLGuBuc3

Answer 2

更新，2021：对于现代 Bootstrap（4+），我推荐 Zim 的答案，因为它是使用 Bootstrap Flex 类的自然方式

.col-xs-2{
    background:#00f;
    color:#FFF;
}
.col-half-offset{
    margin-left:4.166666667%
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row" style="border: 1px solid red">
        <div class="col-xs-2" id="p1">One</div>
        <div class="col-xs-2 col-half-offset" id="p2">Two</div>
        <div class="col-xs-2 col-half-offset" id="p3">Three</div>
        <div class="col-xs-2 col-half-offset" id="p4">Four</div>
        <div class="col-xs-2 col-half-offset" id="p5">Five</div>
        <div>lorem</div>
    </div>
</div>

这个应该没问题。

Answer 3

默认引导程序（版本 4.6）网格允许您执行此操作。
您可以将 7, 7 11 列排成一行。

<div class="container">
  <div class="row row-cols-5">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

此的响应式版本。

<div class="container">
  <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-5">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Answer 4

只需将其添加到您的 CSS 中

/* 5 Columns */

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.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;
    }
}

Answer 5

有时我被要求在现有的引导网站中使用一些非常奇怪的网格布局（不要弄乱当前的代码）。我所做的是创建一个单独的 CSS 文件，我可以将其放入当前的引导项目中并使用其中的网格布局样式。以下是 bootstrap-5ths.css 文件包含的内容以及它如何查找 bootstrap 版本 4 的示例。

如果您想在 bootstrap 版本 3 中使用它，只需删除 col-xl-* 样式并将最小宽度从 576px 更改为 768px、768px 更改为 992px、992px 更改为 1200px。

.col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths, .col-xl-5ths, 
.col-xs-two5ths, .col-sm-two5ths, .col-md-two5ths, .col-lg-two5ths, .col-xl-two5ths, 
.col-xs-three5ths, .col-sm-three5ths, .col-md-three5ths, .col-lg-three5ths, .col-xl-three5ths, 
.col-xs-four5ths, .col-sm-four5ths, .col-md-four5ths, .col-lg-four5ths, .col-xl-four5ths, 
.col-xs-five5ths, .col-sm-five5ths, .col-md-five5ths, .col-lg-five5ths, .col-xl-five5ths, 
{
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 576px) {
    .col-sm-5ths {width: 20%;float: left;}
    .col-sm-two5ths {width: 40%;float: left;}
    .col-sm-three5ths {width: 60%;float: left;}
    .col-sm-four5ths {width: 80%;float: left;}
}

@media (min-width: 768px) {
    .col-md-5ths {width: 20%;float: left;}
    .col-md-two5ths {width: 40%;float: left;}
    .col-md-three5ths {width: 60%;float: left;}
    .col-md-four5ths {width: 80%;float: left;}
}

@media (min-width: 992px) {
    .col-lg-5ths {width: 20%;float: left;}
    .col-lg-two5ths {width: 40%;float: left;}
    .col-lg-three5ths {width: 60%;float: left;}
    .col-lg-four5ths {width: 80%;float: left;}
}

@media (min-width: 1200px) {
    .col-xl-5ths {width: 20%;float: left;}
    .col-xl-two5ths {width: 40%;float: left;}
    .col-xl-three5ths {width: 60%;float: left;}
    .col-xl-four5ths {width: 80%;float: left;}
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <div class="col-md-5ths">1</div>
  <div class="col-md-5ths">1</div>
  <div class="col-md-5ths">1</div>
  <div class="col-md-5ths">1</div>
  <div class="col-md-5ths">1</div>
 </div>
<div class="row">
  <div class="col-md-5ths">1</div>
  <div class="col-md-two5ths">2</div>
  <div class="col-md-two5ths">2</div>
</div>
<div class="row">
  <div class="col-md-three5ths">3</div>
  <div class="col-md-two5ths">2</div>
 </div>
<div class="row">
  <div class="col-md-four5ths">4</div>
  <div class="col-md-5ths">1</div>
 </div>
<div class="row">
  <div class="col-md-five5ths">5</div>
 </div>
 </div>

Answer 6

<div class="row">
    <div class="col">One</div>
    <div class="col">Two</div>
    <div class="col">Three</div>
    <div class="col">Four</div>
    <div class="col">Five</div>
</div>

您可以通过编写媒体查询来自定义您需要的内容。这样我们就可以保持响应式设计

@media(max-width: 425px) {
    .col {
      flex-basis: auto;
      -webkit-box-flex: 1;
      flex-grow: 1;
      max-width: 100%;
    }
}
@media(min-width: 426px) and  (max-width: 961px){
  .col {
    flex-basis: auto;
    -webkit-box-flex: 1;
    flex-grow: 1;
    max-width: 50%;
  }
}

Answer 7

为什么不使用网格？

.container {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-column-gap: 20px
}

Answer 8

CSS

.bg{
    background-color: #9DC3E6;
    border-radius: 10px;
    color: #fff;
    padding: 15px;
}
.col-xs-5-cols,
.col-sm-5-cols,
.col-md-5-cols,
.col-lg-5-cols {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-5-cols {
  width: 20%;
  float: left;
}

@media (min-width: 768px) {
  .col-sm-5-cols {
      width: 20%;
      float: left;
  }
}

@media (min-width: 992px) {
  .col-md-5-cols {
      width: 20%;
      float: left;
  }
}

@media (min-width: 1200px) {
  .col-lg-5-cols {
      width: 20%;
      float: left;
  }
}

html

<div className="row">
    <div className="col-md-5-cols">1<div className="bg"></div></div>
    <div className="col-md-5-cols">2<div className="bg"></div></div>
    <div className="col-md-5-cols">3<div className="bg"></div></div>
    <div className="col-md-5-cols">4<div className="bg"></div></div>
    <div className="col-md-5-cols">5<div className="bg"></div></div>
</div>

Answer 9

如果您想对每行强制使用 20% 的列宽，即使某些行中没有 5 列，您也必须将以下内容添加到 css 或 scss 文件中：

.col-xs-5-cols,
    .col-sm-5-cols,
    .col-md-5-cols,
    .col-lg-5-cols {
        position: relative;
        width: 100%;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }

    .col-xs-5-cols {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
    @media (min-width: 768px) {
        .col-sm-5-cols {
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
    }
    @media (min-width: 992px) {
        .col-md-5-cols {
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
    }
    @media (min-width: 1200px) {
        .col-lg-5-cols {
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
    }

并在您的 html 中，使用添加的类，如下所示：

<div class="row">
        <div class="col-lg-5-cols"></div>
        <div class="col-lg-5-cols"></div>
        <div class="col-lg-5-cols"></div>
        <div class="col-lg-5-cols"></div>
        <div class="col-lg-5-cols"></div>
</div>

Answer 10

将一些

margin-left

放入全绿色

divs

中，但不要放在第一个

Answer 11

查看此页面以获取常规 Boostrap 布局信息 http://getbootstrap.com/css/#grid-offsetting

试试这个：

<div class="col-xs-2" id="p1">One</div>
<div class="col-xs-3">
  <div class="col-xs-8 col-xs-offset-2" id="p2">Two</div>
</div>
<div class="col-xs-2" id="p3">Three</div>
<div class="col-xs-3">
  <div class="col-xs-8 col-xs-offset-2" id="p4">Four</div>
</div>
<div class="col-xs-2" id="p5">Five</div>

我分别将宽度分成5个不均匀的

div

和

col-xs- 2,3,2,3,2

。两个

div

和

col-xs-3

的大小是

col-xs-2 div

大小的 1.5 倍，因此列宽需要是 2/3x (

1.5 x 2/3 = 1

)

col-xs-3

宽度以匹配其余部分。

Answer 12

更好，您可以使用任何 div 计数。

.col-xs-2{
    background:#00f;
    color:#FFF;
}

.col_item {
    margin-left:4.166666667%
}
.col_item:first-child,
.col_item:nth-child(5n+1) {
    margin-left: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row" style="border: 1px solid red">
        <div class="col-xs-2 col_item" id="p1">One</div>
        <div class="col-xs-2 col_item" id="p2">Two</div>
        <div class="col-xs-2 col_item" id="p3">Three</div>
        <div class="col-xs-2 col_item" id="p4">Four</div>
        <div class="col-xs-2 col_item" id="p5">Five</div>
        <div class="col-xs-2 col_item" id="p5">One</div>
    </div>
</div>

Answer 13

诚实地做到这一点的最佳方法是更改列数，而不是试图将 5 变成 12。

您可能使用的最佳数字是 20，因为它可以被 2、4 和 5 整除。

因此，在您的

variables.less

中查找：

@grid-columns: 12

并将其更改为

20

。

然后将您的 html 更改为：

      <div class="row">
        <div class="col-xs-20">
          <div class="col-xs-4" id="p1">One</div>
          <div class="col-xs-4" id="p2">Two</div>
          <div class="col-xs-4" id="p3">Three</div>
          <div class="col-xs-4" id="p4">Four</div>
          <div class="col-xs-4" id="p5">Five</div>
        </div>
        <!-- //col-lg-20 -->
      </div>

我个人会使用

display: flex

来实现这一点，因为 bootstrap 的设计并不是很适合 5 列分割。

Answer 14

带有引导变量的wearesicc 5 col解决方案的可复制版本：

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: ($gutter / 2);
    padding-left: ($gutter / 2);
}

.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: $screen-sm) {
    .col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: $screen-md) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: $screen-lg) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

Answer 15

可以在bootstrap3中使用如下：

<div class="row">

    <div class="col-md-2 col-md-offset-1">One</div>
    <div class="col-md-2">Two</div>
    <div class="col-md-2">Three</div>
    <div class="col-md-2">Four</div>
    <div class="col-md-2">Five</div>

</div>

Answer 16

与其添加边距，为什么不向每个 col-xs-2 添加 1px 的 padding-right，因为 padding 仍然是该 div 的一部分

  .col-xs-2 :not(.col-xs-2:nth-child(5))
   {padding-right:1px}

Answer 17

.col-xs-2{
    background:#00f;
    color:#FFF;
}
.col-half-offset{
    margin-left:4.166666667%
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row" style="border: 1px solid red">
        <div class="col-xs-4" id="p1">One</div>
        <div class="col-xs-4 col-half-offset" id="p2">Two</div>
        <div class="col-xs-4 col-half-offset" id="p3">Three</div>
        <div>Test</div>
    </div>
</div>

Answer 18

在 Bootstrap 4 和最新的 Bootstrap 5 中，处理变得更加简单。 5 列布局在大屏幕中将显示 5 个项目，中屏幕中将显示 3 个项目，在小屏幕中将显示 2 个居中对齐的项目。

<div class="row justify-content-center">
   <div class="col-sm-6 col-md-4 col-lg">One</div>
   <div class="col-sm-6 col-md-4 col-lg">Two</div>
   <div class="col-sm-6 col-md-4 col-lg">Three</div>
   <div class="col-sm-6 col-md-4 col-lg">Four</div>
   <div class="col-sm-6 col-md-4 col-lg">Five</div></div>

Answer 19

以下 Bootstrap 5 类对我有用：

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-5 g-3">
  <div class="col">
    <div class="card">
      Item 1
    </div>
  </div>
  <div class="col">
    <div class="card">
      Item 1
    </div>
  </div>
  <div class="col">
    <div class="card">
      Item 1
    </div>
  </div>
  <div class="col">
    <div class="card">
      Item 1
    </div>
  </div>
  <div class="col">
    <div class="card">
      Item 1
    </div>
  </div>
  <div class="col">
    <div class="card">
      Item 1
    </div>
  </div>
  <div class="col">
    <div class="card">
      Item 1
    </div>
  </div>
</div>

Answer 20

这是另一种简单的方法，为每个 col-xs-2 添加宽度 20%：

<div class="col-xs-12">
     <div class="col-xs-2" style="width:20%;" id="p1">One</div>
     <div class="col-xs-2" style="width:20%;" id="p2">Two</div>
     <div class="col-xs-2" style="width:20%;" id="p3">Three</div>
     <div class="col-xs-2" style="width:20%;" id="p4">Four</div>
     <div class="col-xs-2" style="width:20%;" id="p5">Five</div>
</div>

Answer 21

使用偏移怎么样？

<div class="row">
  <div class="col-sm-8 offset-sm-2 col-lg-2 offset-lg-1">
    1
  </div>
  <div class="col-sm-8 offset-sm-2 col-lg-2 offset-lg-0">
    2
  </div>
  <div class="col-sm-8 offset-sm-2 col-lg-2 offset-lg-0">
    3
  </div>
  <div class="col-sm-8 offset-sm-2 col-lg-2 offset-lg-0">
    4
  </div>
  <div class="col-sm-8 offset-sm-2 col-lg-2 offset-lg-0">
    5
  </div>
</div>