'.col-md-6'内'.row'的整个一半的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类的位置设置为“绝对”，但这不是现成的引导程序的默认行为。

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

并记住： 边距>边框>填充

仅在边框内应用背景。

Answer 2

使用类容器流体并遵循CSS。

<div class="container-fluid">

CSS

.row {
  border: 5px solid black;
}

.col-6 {
  padding: 0 0 0 30px;
}

.row div.col-6:last-child {
  background: #aaa;
  padding: 0 30px 0 0;
}

.container {
  padding: 0 30px 0 0;
  border: 1px solid grey;
}

示例：https://jsfiddle.net/aq9Laaew/47448/

Answer 3

最简单的方法：

section{position: relative;min-height: 200px;}
section:before{content:"";position: absolute;left:50%; right: 0; top: 0; bottom: 0;background: rgba(195,68,86,0.2);}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<section>
 <div class="container">
  <div class="row"> 
    <!-- LEFT SECTION -->
    <div class="col-sm-6">

         LEFT

    </div>

    <!-- RIGHT SECTION -->
    <div class="col-sm-6">

         RIGHT

    </div>

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