BootStrap栅格之间留空隙的解决方法

下面是关于“BootStrap栅格之间留空隙的解决方法”的完整攻略。

背景和问题描述

在使用Bootstrap栅格系统排版时，可能会出现相邻的两个栅格之间没有留出空隙的情况，给用户的视觉体验带来困扰。比如在一个行内使用了四个col-md-3的div，希望每个div之间有margin-right: 10px的间隔，而实际上并没有，需要使用一些方式来实现间隔效果。

解决方案

方案1：使用Flexbox实现

使用Flexbox是一种比较简便的方法，在此方式下，我们可以使用Flexbox来实现列与列之间的间隔效果，而不需要在每个列上设置特定的margin或padding。

以一个三列布局为例：

<div class="row justify-content-between">
  <div class="col-sm">1</div>
  <div class="col-sm">2</div>
  <div class="col-sm">3</div>
</div>

只需要在这个div的样式中添加以下代码：

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -10px;
  margin-left: -10px;
}

.row > [class^="col-"] {
  margin-right: 10px;
  margin-left: 10px;
}

这里给row添加了一个负的margin，而子元素（列）则将自身的margin设置成正的，就可以达到想要的效果。

方案2：使用伪类实现

我们可以通过使用伪类来解决这个问题。

以两列布局为例：

<div class="row">
  <div class="col-md-4">1</div>
  <div class="col-md-4">2</div>
</div>

此时，需要在CSS文件中添加以下代码：

.row:not(:last-child) {
  margin-bottom: 15px;
}

这样，除了最后一个row外，其他的row都会添加margin-bottom: 15px。

示例说明

示例1：使用伪类实现

在这个例子中，我们使用的是第二种方案，即使用伪类实现。

以下是HTML代码：

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card 1</h5>
          <p class="card-text">This is card one.</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card 2</h5>
          <p class="card-text">This is card two.</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card 3</h5>
          <p class="card-text">This is card three.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card 4</h5>
          <p class="card-text">This is card four.</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card 5</h5>
          <p class="card-text">This is card five.</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card 6</h5>
          <p class="card-text">This is card six.</p>
        </div>
      </div>
    </div>
  </div>
</div>

我们只需要在CSS文件中添加以下代码：

.row:not(:last-child) {
  margin-bottom: 15px;
}

就可以得到想要的效果，即每个row之间有一个15px的间隔。

示例2：使用Flexbox实现

在这个例子中，我们使用第一种方案，即使用Flexbox实现。