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

问题描述 投票:0回答:1

我对 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的容器。

bootstrap-5
1个回答
0
投票

你可以做的一种方法是使用基于值 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>
© www.soinside.com 2019 - 2024. All rights reserved.