css - Bootstrap4问题:容器内部和外部的正确列结构

因此，我正在执行一项任务，似乎无法找到解决我问题的合适方法。
我已经在photoshop中进行了设计，以显示要创建的内容：Photoshop Design。

所以从根本上讲，我希望主体部分位于容器内（包括：左侧的一个段落和h1标题旁边的图标图像[右侧]）->所有这些都必须位于响应式容器内。

我的问题是：如何在容器的左侧创建一个“黑匣子”或“ div”，而又不将其放置在包含主要内容的容器上方，并且仍然保持响应状态？

最近几天，我一直在为这个问题而苦苦挣扎，我已经尝试了几乎所有方法（bootstrap中的flex-properties，bootstrap中的col-system，流体容器中的容器...），但是找不到将容器流体与休闲容器结合的方法...如果有人可以帮助我，那肯定会对我有很大帮助！提前致谢！

（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;
}

最佳答案

您可以通过不同的方法来实现。您可以使用哪种方式使用
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>

关于css - Bootstrap4问题:容器内部和外部的正确列结构，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59799710/