如何使用Bootstrap实现文字放置在图片前方的布局效果

直接用Bootstrap原生栅格系统即可实现需求，不需要额外编写复杂的定位逻辑，默认自带响应式适配，移动端会自动堆叠为上下结构。

基础并排布局代码 #

最基础的两列并排写法，直接替换你原有代码即可：

<!-- 请先确保页面已经引入Bootstrap CSS资源 -->
<div class="container my-5">
  <div class="row align-items-center">
    <!-- 图片列：桌面端占6列宽度 -->
    <div id="picture" class="col-md-6">
      <img src="img/preview.jpg" class="img-fluid w-100" alt="预览图">
    </div>
    <!-- 文字列：桌面端占6列宽度 -->
    <div id="description" class="col-md-6 ps-md-4">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br> 
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br> 
      It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>
</div>

文字叠加在图片边缘的效果（匹配示例视觉效果） #

如果需要实现文字块轻微压在图片前方的层叠效果，只需要给文字列加Bootstrap自带的负边距类，同时给文字块加背景、内边距保证可读性即可，调整后代码：

<div class="container my-5">
  <div class="row align-items-center">
    <div id="picture" class="col-md-7">
      <img src="img/preview.jpg" class="img-fluid w-100 shadow" alt="预览图">
    </div>
    <div id="description" class="col-md-6 ms-md-n3 bg-white p-4 shadow">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br> 
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br> 
      It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>
</div>

关键工具类说明 #

• .container：Bootstrap标准固定宽度容器，控制内容整体宽度居中，需要全宽布局替换为.container-fluid即可
• .row：栅格行容器，用来包裹列元素，自动处理列元素的间距
• .align-items-center：让行内的图片和文字垂直居中对齐，需要顶部对齐就换成.align-items-start，底部对齐换成.align-items-end
• .col-md-*：在屏幕宽度≥768px（md断点）时，元素占据对应比例的宽度，小于这个宽度时自动占满整行，适配移动端上下堆叠的浏览需求，可根据设计调整两列占比，比如图片占8列文字占4列
• .img-fluid：给图片加这个类会自动让图片自适应父容器宽度，不会出现横向溢出
• .ms-md-n3：md断点以上给元素加左侧负边距，实现文字块向左偏移压在图片上的效果，数值越大偏移量越大，可根据需要调整为n2/n4/n5
• .bg-white、p-4、shadow：分别对应白色背景、1.5rem内边距、阴影效果，用来保证叠加时文字的可读性，可根据设计需求删减或调整

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