避免仅在Bootstrap 4上设置样式的div

Question

<div class="container-fluid">
  <div class="row">
    <div id="div#1" class="item color col-md-6">
      col-md-6
    </div>
    <div id="div#2" class="item col-md-6">
      <div class="color">
        col-md-6
      </div>
    </div>
  </div>
</div>

.color {
  background-color: yellow;
}

在上面的示例中，div＃1应用了颜色类别，因此整个div（拉伸到最左端）都获得了样式。该功能仅在大屏幕上有效，因此下面是它的屏幕截图。

https://codepen.io/vbcda/pen/dgLVPy

我的目的是仅将背景颜色保留在内容区域，而不要一直到文档边缘。

一种解决方案是在内部使用另一个div来像div＃2一样应用样式。

现在这正是我想要的样子，但是我真的不想仅将额外的div用于样式设置。

我想避免“神志不清”。我该怎么办？

Answer 1

使用CSS background-clip使其不填充填充区域...

.color {
  background-color: yellow;
  background-clip: content-box;
}

https://codepen.io/anon/pen/LgvXOj