Bootstrap 5栅格布局lg断点下View More按钮位置异常问题

问题表现 #

lg屏幕断点下"View More"按钮下沉到页脚上方位置，预期效果是将按钮放在左侧"I'm Nate Finn"介绍图片下方居中，不打乱现有图片排布。

问题根源 #

• Bootstrap栅格要求.row的直接子元素必须是带col-*类的列元素，原代码把lg端的按钮放在了和列平级的.container-fluid容器里，脱离了正常栅格排布流
• 原代码lg断点下列宽计算异常：左侧文本列占col-lg-7，右侧人像列未设置lg断点专属宽度，默认继承col-5占5列，7+5刚好占满整行12列，没有剩余空间放置平级的按钮容器，导致按钮被挤到行的最底部
• lg端的"I'm Nate Finn"图片本身就在左侧col-lg-7列内部，不需要单独为按钮新建跨列的平级容器

修复步骤 #

• 删除原代码中单独放置lg端按钮的平级.container-fluid代码块
• 将lg端显示的按钮直接移动到左侧col-lg-7列内部，放在"I'm Nate Finn"图片的后方
• 给按钮包裹层添加文本居中类，保证按钮在列内居中，同时添加d-none d-lg-block类控制仅在lg及以上断点显示，和小屏按钮的显示逻辑（d-lg-none）对应
• 给右侧人像列补上col-lg-5类，明确lg断点下的列宽，避免栅格宽度计算歧义

修复后完整代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="text-end col-lg-7 ps-sm-5 pe-sm-5">
      <img class="img-fluid pt-5" src="https://via.placeholder.com/100" alt="Welcome Message">
      <img class="img-fluid d-none d-lg-block pt-5 mt-5 ps-sm-2" src="https://via.placeholder.com/100" alt="I'm Nate Finn">
      <!-- lg端按钮直接放在当前列的图片下方 -->
      <div class="text-center pt-4 d-none d-lg-block">
        <button class="btn btn-outline-dark btn-lg fw-bolder border-3">View More</button>
      </div>
    </div>
    <div class="text-end col-5 col-lg-5 order-lg-0 order-md-2 order-2 float-end px-0">
      <img class="img-fluid pt-5 py-0 m-0 border-dark" src="https://via.placeholder.com/100" alt="Vector Cartoon of Face and Torso">
    </div>
    <div class="text-center col-7 order-lg-2 d-lg-none order-md-1 order-lg-0 pe-sm-5 ps-sm-5 pt-3">
      <img class="img-fluid" src="https://via.placeholder.com/100" alt="I'm Nate Finn">
      <button class="btn btn-outline-dark btn-sm fw-bold border-2">View More</button>
    </div>
  </div>
</div>

适配效果 #

• lg及以上桌面端：按钮居中显示在左侧介绍图片下方，不会下沉到页脚位置，原有两列图片的排布顺序、位置完全不受影响
• 平板、移动端：保留原有适配逻辑，按钮位置和样式和之前一致
• 栅格结构符合Bootstrap 5规范，不会出现其他断点下的布局错位问题

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