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

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通过使用 col-md-6 类，每个都占据屏幕的一半，然后我们关闭容器。请注意，这是基于中等屏幕尺寸，如果屏幕尺寸较小，则为 col-sm-6。这是所有其他选项的引用 --> https://www.w3schools.com/bootstrap5/bootstrap_grid_basic.php

<div class="container">
   <div class="col-md-6">
    IMAGE SIDE
  </div>
   <div class="col-md-6">
    TEXT SIDE
  </div>
</div>

更新 - 尝试这个 CSS 代码：

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden; /* Clearfix to contain floated elements */
}

.image {
  width: 100%;
  float: left;
}

.text {
  float: right;
  width: calc(100% - 50%); /* Adjust the percentage to control the spacing */
  box-sizing: border-box;
  padding: 20px; /* Add padding as needed */
}

img {
  display: block; /* Remove default inline-block spacing for images */
  max-width: 100%;
  height: auto;
}