Bootstrap 5底部固定网格布局缩小时换行问题求助

我用Bootstrap 5开发了一个底部固定导航布局，当屏幕宽度缩小时，row中的列元素会自动换行到第二行，不符合预期效果。我希望在移动端显示时，所有列保持在同一行。

解决方案 #

要实现移动端所有列横向排列不换行，可通过以下调整：

1. 给row添加flex-nowrap类：Bootstrap的该类会设置flex-wrap: nowrap，强制所有列在同一行展示，阻止自动换行。
2. 替换列的宽度类：用col-auto代替默认的col，让列根据内部内容自动分配宽度，避免均分宽度导致空间不足。
3. 优化内部元素尺寸：适当缩小图标和文字的尺寸，适配移动端有限的屏幕空间，避免布局溢出。

修改后的完整代码 #

<div class="container-fluid fixed-bottom" style="margin-bottom: 16px;">
  <div class="row align-items-center flex-nowrap">
    <div class="col-auto">
      <div class="text-center bottomElement">
        <img class="img-fluid bottomIcon" src="/assets/business.png" style="max-width:40px;" />
        <p class="bottomText" style="color: white; font-size: 0.8rem;">Business</p>
      </div>
    </div>
    <div class="col-auto">
      <div class="text-center bottomElement">
        <img class="img-fluid bottomIcon" src="/assets/calculator.png" style="max-width:40px;" />
        <p class="bottomText" style="color: white; font-size: 0.8rem;">Calculator</p>
      </div>
    </div>
    <div class="col-auto">
      <div class="text-center bottomElement">
        <img class="img-fluid bottomIcon" src="/assets/oogPermits.png" style="max-width:40px;" />
        <p class="bottomText" style="color: white; font-size: 0.8rem;">OOG Permits</p>
      </div>
    </div>
    <div class="col-auto">
      <div class="text-center bottomElement">
        <img class="img-fluid bottomIcon" src="/assets/services.png" style="max-width:40px;" />
        <p class="bottomText" style="color: white; font-size: 0.8rem;">Services</p>
      </div>
    </div>
    <div class="col-auto">
      <div class="text-center bottomElement">
        <img class="img-fluid bottomIcon" src="/assets/career.png" style="max-width:40px;" />
        <p class="bottomText" style="color: white; font-size: 0.8rem;">Career</p>
      </div>
    </div>
  </div>
</div>

额外优化建议 #

如果担心极端小屏下列表溢出屏幕，可给最外层的container-fluid添加overflow-x-auto类，这样用户可以通过横向滑动查看所有导航项，提升移动端体验：

<div class="container-fluid fixed-bottom overflow-x-auto" style="margin-bottom: 16px;">
  <!-- 内部row和列代码不变 -->
</div>

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