使用Bootstrap与CSS absolute实现图片居右及左右分栏布局问题

我来帮你搞定这个Bootstrap布局的问题！你的核心困扰应该是没利用好网格系统的嵌套规则和图片自适应属性，导致要么图片位置不对，要么失去响应式特性。下面是一步到位的解决方法：

正确的HTML结构 #

你需要用row包裹两个col-md-6，确保中等屏幕及以上是两栏布局，小屏幕自动堆叠。同时给图片加Bootstrap内置的宽度类，让它撑满所在列容器：

<div class="container">
  <div class="row align-items-center"> <!-- 可选：让文本和图片垂直居中对齐 -->
    <!-- 左侧文本栏 -->
    <div class="col-md-6 px-4"> <!-- px-4 给文本加左右内边距，避免贴边 -->
      <h2>你的标题内容</h2>
      <p>这里放你的描述文本，当屏幕宽度小于768px时，这部分会自动跑到图片上方，完全响应式！</p>
    </div>
    <!-- 右侧图片栏 -->
    <div class="col-md-6 p-0"> <!-- p-0 移除列默认内边距，让图片贴到角落 -->
      <img src="你的图片URL" alt="图片描述" class="w-100 h-100 object-fit-cover">
      <!-- object-fit-cover 可选：保持图片比例，裁剪多余部分填满容器，避免拉伸变形 -->
    </div>
  </div>
</div>

关键细节拆解 #

• row是Bootstrap网格的核心容器，必须包裹col-*类，才能保证列间距和响应式行为，避免元素重叠。
• col-md-6：屏幕宽度≥768px时，每栏占一半宽度；小于该尺寸时自动堆叠成单列，完美解决响应式问题。
• p-0：移除列默认的15px左右内边距，让图片完全贴到容器右侧角落，不会留空白。
• w-100：强制图片宽度100%适配父列容器，随屏幕尺寸自动缩放。
• align-items-center：可选的row类，让文本和图片在垂直方向居中，视觉效果更协调。

为什么之前的方法失效？ #

• 图片和文本放同一个col-md-6：相当于把两个元素挤在半宽容器里，图片自然没法撑满右侧角落，因为容器本身只有一半宽度。
• 分开设置但不用row包裹：没利用Bootstrap的网格间距和响应式规则，屏幕缩小时图片会直接覆盖文本，失去自适应能力。

如果需要调整文本内边距、图片高度这类细节，直接加Bootstrap的间距类（比如py-3给文本添上下内边距）或者自定义少量CSS就行~

内容的提问来源于stack exchange，提问作者Ace