html - '.row' 中整个一半的 '.col-md-6' 的 CSS 背景

Question

我正在尝试为半行设置背景，如图所示 灰色代表背景图像。

但是当我设置第二个 .col-md-6 的背景时，它只设置了它的背景而忽略了填充。我明白这就是它的本意。但我希望就如何在实现我想要的布局(如图所示)的同时解决这个问题提出建议。我正在使用 Bootstrap 4。

到目前为止我的代码结构是:

<section>
 <div class="container">
  <div class="row"> 
    <!-- LEFT SECTION -->
    <div class="col-md-6">
      <div class="container">
         TITLE AND CONTENT LEFT
      </div>
    </div>

    <!-- RIGHT SECTION -->
    <div id="right" class="col-md-6">
      <div class="container">
         TITLE AND CONTENT LEFT
      </div>
    </div>

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

我的 CSS 是:

#right{
 background-size:cover;
 background-image: imageUrl;
}

//For overlay over image
#right:before{
 content:"";
 position: absolute;
 left:0; right: 0; 
 top: 0; bottom: 0;
 background: rgba(195,68,86,0.2);
}

Answer 1

我假设您正在使用 Bootstrap。 .row 类的边距与其父级相关。由于 .col-md-6 位于 .row 元素内，它必须遵守其边界(HTML 和 CSS 就是这样工作的)，除非您将 .col-md-6 类的位置设置为“绝对”，但这不是开箱即用 Bootstrap 的默认行为。

您可以考虑使用 .row-fluid，它会改变边距，但如果您想保留该填充，则需要制作一些自定义 css 以在 .col-md-6 类中制作填充。

记住:边距 > 边框 > 填充

背景仅应用于边框内。