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

Question

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

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

我的问题是：如何在容器旁边的左侧创建一个 "black box" 或 "div" ，而不是将其放置在包含主要内容的容器上方，并且仍然反应灵敏？

过去几天我一直在为这个问题而苦苦挣扎我已经尝试了几乎所有的东西（[=40= 中的flex-properties，bootstrap 中的col-systems , container inside a fluid container,...) 但找不到将 container-fluid 与临时容器组合的方法...如果有人能帮助我，那肯定会帮助我很多！提前致谢！

(ps：我没有 post 代码，因为我尝试的一切都没有成功。) 这是我希望 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 中实现了这个东西，请检查这个 link：codepen 您可以从这个 link 阅读更多关于 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>

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

Bootstrap4 problem : proper column structure inside and outside a container

css

containers

spacing

flexbox

bootstrap-4