Bootstrap4 问题：容器内外的正确列结构

Question

所以我正在处理一项任务，但似乎无法找到解决问题的合适方法。 我已经在 Photoshop 中制作了一个设计来展示我想要创建的内容：Photoshop Design。

所以基本上我希望将主要部分放在容器内（包括：左侧的段落和 h1 标题旁边的图标图像[在右侧]）- > 这一切都需要放在一个响应式容器中。

我的问题是：如何在容器旁边的左侧创建一个“黑盒”或“div”，而不将它放在包含主要内容的容器上方，并且仍然可以响应？

过去几天我一直在为这个问题苦苦挣扎，我已经尝试了几乎所有的东西（引导程序中的 flex-properties、引导程序中的 col-systems、流体容器中的容器……）但不能找不到将容器流体与休闲容器结合的方法……如果有人可以帮助我，那肯定会对我有很大帮助！提前致谢！

（ps：我没有发布代码，因为我尝试的一切都没有成功。） 这是我希望 div 看起来如何的示例：example image

HTML：

    <div class="container-fluid h-50" id="outerContainer">
  <div class="container h-100" id="innerContainer">
    <div class="row">
      <div class="col">
        <p>
          Bij Lux kom je voor een hele avond. Geniet van een diner tot 6
          gangen en drink de betere wijnen per glas, maar neem je aperitief
          en digestief in onze bar Festiv. Zo ervaar je twee totaal
          verschillende sferen zonder het pand te moeten verlaten en ben je
          even helemaal van de wereld geweest.
        </p>
      </div>
      <div class="col text-center">
        <img src="/images/icons/lightbulb.svg" id="iconScale" class="img-fluid" alt="concept icon" />
      </div>
      <div class="col">
        <h2>
          CONCEPT
        </h2>
      </div>
    </div>
  </div>
</div>

CSS：

html,
body{
  height: 100%;
}

#innerContainer{
  background-color: black;
}

#outerContainer{
  background-color: black;
}

#iconScale{
  max-width: 100px;
}

h2{
  color: #d8a55d;
  font-size: 4rem;
}

p{
  color: white;
}

Answer 1

• 您可以通过不同的方式实现这一目标。您可以使用哪种方式 Pesudo element 喜欢 :before。
• 我已经在 codepen 中实现了这个东西，请检查这个链接：codepen 您可以通过以下链接了解更多关于 Pesudo 元素的信息：Pesudo Element

.container{
    width: 700px;
    margin: auto;
}
.background-outside {
    height: 300px;
    width: 100%;
    outline: thin solid black;
    position: relative;
    background: white;
}

.background-outside::before {
    height: 100%;
    content: ' ';
    position: absolute;
    top: 0;
    bottom:0px;
    width: 100%;
    left: -100%;
    background-color: green;
}

<div class="container">
    <div class="background-outside">

    </div>
</div>