html - 为 div 添加背景会破坏设计

问题描述

我的页面上有一个引导行，分为三列。我想在 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;">

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

.card{
  border-radius: 15px;
}

而已。添加此类会为 div（列）提供圆角边缘并添加白色背景。但是，每次我这样做时，间距都消失了，我的列中的内容只是粘在左边而不是左右浮动。

如何在不破坏任何格式的情况下为这些列添加背景？或者有人知道这里发生了什么吗？

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

首先，我建议你应该只在容器内放置行。如果将它们放在.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，只需将背景颜色类放入：

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

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

html - 为 div 添加背景会破坏设计

问题描述

解决方案

推荐阅读