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放在一起，则Bootstrap网格系统将不再起作用，因为行没有flexbox容器父级。

第二，如果内部需要2列，为什么不声明一行2列呢？您已经使用它来创建3列外部布局。将内联样式与浮点数一起使用会破坏使用Bootstrap flexbox样式网格系统的目的：

<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中，就像将background color classes放在其中一样简单：

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

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

向div添加背景会破坏设计

1 个答案: