为div中断设计添加背景

Question

我的页面上有一个引导行，它被分成三列。我想在这3列之间添加一些空间，并在内部将每个单独的列分割成2部分。在大量搜索之后，这就是我到达的地方。

<div class="container row h-100 mx-auto" style="margin-top: -60px;">
  <div class="col-sm-4 ">
    <div class="mx-3">
          <div class="" style="width:50%; float: right;">
            <h4>About Us</h4>
            <p>Find out more about our team of working professionls</p>
          </div>
    </div>
  </div>
  <div class="col-sm-4 ">
    <div class="mx-3 rounded">
      <div style="width: 50%; float: left;">
        <i class="fa fa-users" aria-hidden="true"></i>
      </div>
      <div style="width: 50%; float: right;">
        <h4>Our Purpose</h4>
        <p>Come up with some stuff to be put in here</p>
      </div>
    </div>
  </div>
  <div class="col-sm-4 ">
    <div class="mx-3">
      <h4>Our products and services</h4>
      <p>Check out our vast array of products and services that we offer.</p>
    </div>
  </div>
</div>

以下是它的外观：

​

忽略这三条蓝线，那是实验代码。

现在一切都很好，除了我不能给我的列添加背景颜色。每次我尝试添加任何颜色，它都不会出现。我写的台词是这样的：

<div class="mx-3 rounded" style="background: red;">

除此之外，我在我的主CSS文件中定义了一个.card类，如下所示：

.card{
  border-radius: 15px;
}

就这样。添加这个类会给div (列)一个圆角边，并添加一个白色的背景。然而，每次我这样做的时候，间距就会消失，我的列中的内容只会粘在左边，而不是左右浮动。

如何在不破坏任何格式的情况下向这些列添加背景？还是有人知道这是怎么回事？

Answer 1

首先，我建议您只应在容器内有行。如果将.container和.row放在一起，那么引导网格系统就不再工作了，因为行没有柔性盒容器父级。

其次，如果您想在内部声明2列，为什么不声明一行和2列呢？您已经使用它创建了3列外部布局。使用带浮动的内联样式不符合使用Bootstrap柔性盒式网格系统的目的：

<div class="rounded">
    <div class="row">
        <div class="col-6">...</div>
        <div class="col-6">...</div>
    </div>
</div>

您还可以使用内置的.card类来帮助您处理垫子：

<div class="row">
    <div class="col-sm-4">
        <div class="card border-0">
            <div class="card-body">
                <div class="row">
                    <div class="col-6"></div>
                    <div class="col-6">
                        <h4 class="card-title">Our Purpose</h4>
                        <p class="card-text">
                            ...
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

要向.card添加背景色，只需将背景颜色类放入：

<div class="card border-0 bg-danger">
    ...
</div>

​

​

演示： https://jsfiddle.net/davidliang2008/ed8bav14/36/