带图像的容器流体内部的Bootstrap 4容器（内容余量）

Question

真的很难解释我想要什么，所以我拍了张照片。

我在这里找不到任何东西，但也许我没有以正确的方式进行搜索。 我的问题是： 如何使此容器具有内容（红色）。 （绿色是容器，蓝色是容器流体

灰色是图像背景）。

Answer 1

我建议您不要创建一个容器来容纳两个容器，而要使两个容器变得可以流动，而不是让一个容器变得可以流动。

要创建列，可以使用bootstrap's grid system。这样，您就可以计算出每一行应该跨越多少列，从而可以按需要将内容向上对齐：

.outline-green {
  outline: 1px solid lime;
}

.outline-blue {
  outline: 1px solid blue;
}

.outline-red {
  outline: 1px solid red;
}

#so-logo {
  height: 100%;
  width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="offset-3 col-6 outline-green">
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
  </div>
</div>

<div class="container-fluid outline-blue">
  <div class="row">
    <div class="col-6 outline-blue">
       <img id="so-logo" src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1" alt="Stackoverflow Logo" />
    </div>
    <div class="col-3 outline-red">
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
  </div>
</div>