Bootstrap 4栅格系统实现目标布局时图片无法占满容器高度问题求助

实现方案 #

你需要把布局拆为左右两个顶层栅格列，利用Bootstrap 4默认的flex弹性高度特性，让右侧图片列自动匹配左侧内容的总高度：

1. 外层row下先分两个列：左侧col-sm-9承载标题和链接列表，右侧col-sm-3单独放图片
2. 左侧列内部再嵌套row，分别放标题（占12列）和3组链接（各占4列）
3. 给图片添加高度100%、宽度100%的样式，配合object-fit: cover保证图片不变形且填满容器

修改后的代码如下：

<div class="container-fluid p-0">
  <div class="row no-gutters">
    <!-- 左侧内容区 占9份 -->
    <div class="col-sm-9">
      <!-- 内部嵌套row放标题和链接 -->
      <div class="row no-gutters">
        <div class="col-12 p-3">
          <h3 class="mega-menu-heading">About</h3>
        </div>
        <div class="col-sm-4 g-pa-0 p-3">
          <ul class="list-unstyled style-list">
            <li class="serviceAbout"><a href="[insert]" title="[insert]">[insert] </a></li>
            <li class="serviceAbout"><a href="[insert]" title="[insert]">[insert]</a></li>
          </ul>
        </div>
        <div class="col-sm-4 g-pa-0 p-3">
          <ul class="list-unstyled style-list">
            <li class="serviceAbout"><a href="[insert]" title="[insert]">[insert] </a></li>
            <li class="serviceAbout"><a href="[insert]" title="[insert]">[insert] </a></li>
          </ul>
        </div>
        <div class="col-sm-4 g-pa-0 p-3">
          <ul class="list-unstyled style-list">
            <li class="serviceAbout"><a href="[insert]" title="[insert]">[insert] </a></li>
            <li class="serviceAbout"><a href="[insert]" title="[insert]">[insert] </a></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 右侧图片区 占3份 高度自动匹配左侧 -->
    <div class="col-sm-3 g-pa-0">
      <img class="w-100 h-100" style="object-fit: cover;" src="/assets/images/misc/nav-image.jpg" alt="导航图片">
    </div>                                
  <!--/end row--> 
  </div>
</div>

关键调整说明 #

• 用no-gutters类去掉栅格默认的间距，贴合你没有额外边距的需求
• Bootstrap 4的row默认是flex布局，同层级的列高度会自动对齐，所以右侧图片列高度会和左侧的标题+链接总高度完全一致
• 给图片加object-fit: cover可以避免图片拉伸变形，多余部分会自动裁剪，符合设计稿的效果

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