Bootstrap CSS - 将页面从中心向下拆分。用图像填充左侧，用文本填充右侧

Question

我对 bootstrap 5 相当熟悉，但我正在开发一个项目，我试图找出将页面从中心分割的最佳方法，但中间还有一个容器，允许边界文本不会扩展过去。

容器宽度应为 1400px，这是我当前定义页面的宽度。

我想做的几乎是

<div class="container"> 1400px wide centered on page
<div class="col">Image that fills the left side to the edge</div>
<div class="col">Text that is bound within the 1400px container</div>
</div>

我可能只是脑子不够用，这比我做的要容易。

非常感谢您的帮助。

我尝试将图像设置为无填充。但右边的文字超出了1400px的容器。

Answer 1

你可以做的一种方法是使用基于值 12 的 col 类，因此将屏幕分成两半就像将 12 除以 2 得到值 6 一样简单，我们只显示 2 个 div每个占据屏幕的一半，然后我们关闭容器。

<div class="container">
   <div class='col-md-6'>
    LEFT SIDE
  </div>
   <div class='col-md-6'>
    RIGHT SIDE
  </div>
</div>