Bootstrap 4.4如何用flex-grow/shrink实现响应式导航项布局？

你遇到的布局失效，本质是对Bootstrap 4.4内置flex工具类的作用范围、属性组合逻辑没有对齐预期：

• flex-fill 是全断点生效的工具类，等价于给元素强制设置 flex: 1 1 0% !important，会在所有视口尺寸下让元素平分flex容器的剩余空间
• 单独在元素上加flex-md-grow-*/flex-md-shrink-*类时，没有重置flex-fill绑定的flex-basis:0属性，会导致md及以上视口下元素初始宽度塌缩，且无法回到自然内容宽度，自然没法实现左右分栏的布局效果。

只需要调整3个<li>的工具类组合，不需要改动外层容器结构，就能同时满足两个断点的布局要求：

1. 小于md视口（移动端）：三个<li>保持平分ul全部宽度，各占33.3%
2. md及以上视口（大尺寸设备）：前两个<li>回到内容自然宽度、紧贴靠左排列，第三个<li>自动撑满剩余空间顶到最右侧

修正后的完整代码如下：

<div class="d-flex align-items-center flex-fill">
  <ul class="nav list-unstyled d-flex flex-fill mb-0">
    <!-- 前两个元素：全断点保留flex-fill保证移动端平分，md断点下重置flex属性为自然宽度 -->
    <li class="nav-item flex-fill flex-md-grow-0 flex-md-shrink-0 flex-md-basis-auto">
      Element 1
    </li>
    <li class="nav-item flex-fill flex-md-grow-0 flex-md-shrink-0 flex-md-basis-auto">
      Element 2
    </li>
    <!-- 第三个元素：全程保留flex-fill，md下会自动撑满剩余空间实现右对齐 -->
    <li class="nav-item flex-fill">
      Element 3
    </li>
  </ul>
</div>

• 视口宽度<768px（Bootstrap md断点的默认阈值）：三个<li>全部保持flex:1 1 0%的属性，自动平分ul的100%宽度，完全实现移动端等宽均匀分布的效果
• 视口宽度≥768px：
  • 前两个<li>被md断点规则覆盖，变为flex: 0 0 auto，宽度完全由自身内容决定，两个元素紧贴在一起靠左排列，不会被对齐规则强行拆分间隙
  • 第三个<li>仍保持flex:1 1 0%的属性，会自动吃掉前两个元素排布后剩下的所有剩余空间，自然把自身内容顶到ul的最右侧，不需要额外加外边距类
• 优化细节：去掉了原代码里多余的list-inline-item类，这类原本服务于传统内联列表布局的类，在已经开启d-flex的ul里会带来不必要的元素间隙，用flex体系的逻辑控制布局更顺畅。

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