html - Bootstrap 4 : div with Equal height with color fill and gutter in between

Question

我正在尝试实现已添加屏幕截图的 bootstrap 4 布局。我阅读了大多数其他堆栈溢出帖子，但没有得到解决方案

1. .container-fluid 布局具有灰色填充颜色，这是通过使用我的自定义类 .bg-grey 实现的。
2. 根据设计，主体位于中心，所以我添加了 .container 类来包裹列。
3. .col-8 有 .bg-white 和 .col-4 有 .bg-dark和他们一起上课。我必须让它离开同样的高度。
4. 它们之间有一个空隙。

面临的问题

1. 在右侧获得额外的边距，因此设计不会在两者之间正确居中​​。

设计试图实现

所以我的解决方案中的问题是，我在右边获得了额外的边距。我已经尝试了两个我有代码的案例。

案例 1:

用下面的代码尝试了很多，但无法实现解决方案。

1. 如果我向 col-8 添加边距，第二个 div .col-4 会随着总宽度的增加而下降。
2. 如果我将 .bg-white 和 .bg-dark 添加到一个新的 child ，填充颜色的大小会发生变化。
3. 在里面新创建的div中，我添加了.h-100类，但即使这样也不起作用

<div class="col-sm-8  ">
  <div class="content px-4 py-2 bg-white h-100">
    <h3 class="heading03">Life at </h3>
    <h2 class="heading02">.</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
      quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
      Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
    </p>


  </div>
</div>

<div class="col-sm-4 ">
  <div class=" content px-4 py-2 bg-black white-text h-100">
    <h5 class="heading05">Latest at </h5>
    <h4 class="heading04 text-muted">Top 10 </h4>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa...
    </p>
    <h5 class="heading05">Latest at </h5>
    <h4 class="heading04 text-muted">Top 10 </h4>
    <p class="m-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa...
    </p>

  </div>
</div>

---

案例 2: 我从 Bootstrap 网站的以下示例中尝试了这种布局。 https://getbootstrap.com/docs/4.0/examples/product/

这是当前代码的样子。边距不相等

1. 尝试删除 。来自 .col-4 的 mr-md-3。没用

<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container-fluid bg-grey pb-5 ">
  <div class="row">
    <div class="container">
      <!-- second part -->


      <div class="row pt-5">

        <div class="d-md-flex flex-md-equal w-100 ">

          <div class="col-8 bg-white mr-md-3 pt-3 px-3 pt-md-5 px-md-5 overflow-hidden">
            <div class="my-3 py-3">
              <h3 class="heading03">Life </h3>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer
                tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
              </p>
            </div>
          </div>


          <div class="col-4 bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-white overflow-hidden">
            <div class="col-12">
              <div class="my-3 p-3">
                <h2 class="display-5"> headline</h2>
                <p class="lead">subheading.</p>
              </div>

            </div>


          </div>
        </div>

      </div>


    </div>
  </div>
</div>

Answer 1

这是使用相同标记布局的文本，一个有背景色，一个没有背景色，因此您可以直观地看到间距。

我已将文本对齐，因此您可以看到由应用于列的默认 BS 填充表示的间距

在我看来，默认情况下 BS 做得很好。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<div class="container-fluid bg-danger">
  <div class="p-4">
    <div class="row">
      <div class="col-8 bg-info">
        <h3 class="heading03">Life</h3>
        <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
      </div>
      
      <div class="col-4 bg-dark text-white">
        <h2 class="display-5"> headline</h2>
        <p class="lead">subheading.</p>
        <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 
        </p>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="p-4">
    <div class="row">
      <div class="col-8">
        <h3 class="heading03">Life</h3>
        <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium.
        </p>
      </div>

      <div class="col-4">
        <h2 class="display-5"> headline</h2>
        <p class="lead">subheading.</p>
        <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
      </div>
    </div>
  </div>
</div>

如果你想要不同的背景颜色和视觉上的“中断”，不要弄乱列的填充和边距，而是将它们的内容包装在 div 中，并在那里玩填充和边距

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<div class="container-fluid bg-danger">
  <div class="p-4">
    <div class="row">
      <div class="col-8 bg-info">
        <div class="mr-1 bg-warning">
          <h3 class="heading03">Life</h3>
          <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
        </div>
      </div>

      <div class="col-4 bg-dark text-white">
        <div class="ml-1 bg-warning">
        <h2 class="display-5"> headline</h2>
        <p class="lead">subheading.</p>
        <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
        </p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="p-4">
    <div class="row">
      <div class="col-8">
        <div class="mr-1">
          <h3 class="heading03">Life</h3>
          <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
        </div>
      </div>

      <div class="col-4 bg-dark text-white">
        <div class="ml-1">
        <h2 class="display-5"> headline</h2>
        <p class="lead">subheading.</p>
        <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
        </p>
        </div>
      </div>
    </div>
  </div>
</div>