时间戳

首页 > 解决方案 > Bootstrap4 问题：容器内外的正确列结构

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

问题描述

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

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

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

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

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

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

标签： cssbootstrap-4flexboxcontainersspacing

解决方案

  • 您可以通过不同的方式实现这一目标。您可以通过哪种方式使用 Pesudo elementlike :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>

推荐阅读