如何在容器流体中使用引导 4 容器，如何将文本始终留在容器内

【问题标题】：how to use bootstrap 4 container inside a container-fluid, How to text always stay inside a container如何在容器流体中使用引导 4 容器，如何将文本始终留在容器内
【发布时间】：2019-09-11 21:24:53
【问题描述】：

如何在 container-fluidhow to design it to text at the blue part always takes inside a container 中使用 bootstrap 4 容器

【问题讨论】：

请告诉我们您的尝试。谢谢

标签： javascript html css bootstrap-4

【解决方案1】：

就像这样:)

https://jsfiddle.net/7pd5xn6h/2/

.container-fluid-bg {
  background-color: blue;
}

.container-bg {
  background-color: green;
  min-height:300px;
}

.row-bg {
  background-color: yellow;
}

.col-bg {
  background-color: red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid container-fluid-bg">
  <div class="container container-bg">
    <div class="row row-bg">
 
      <div class="col-7 offset-1 col-bg">
        Hello
      </div>
      <div class="col-4 col-bg">Hello</div>
    </div>
  </div>
</div>

【讨论】：