Bootstrap 5.0中container-lg类在768px以下屏幕无法满宽如何解决

问题根源 #

你对Bootstrap 5的.container-lg断点规则理解有误，Bootstrap内置容器类的响应式规则如下：

• .container-sm：≥576px时为固定宽度，<576px时为100%宽度
• .container-md：≥768px时为固定宽度，<768px时为100%宽度，完全符合你提出的需求
• .container-lg：≥992px时为lg级固定宽度，768px~991px区间会继承md级的固定宽度，<768px时虽为100%宽度，但默认带左右各0.75rem的内边距，会产生视觉上的留白

修复方案 #

方案1：替换容器类（最简便） #

直接把代码里的.container-lg替换为.container-md即可，原生匹配你要求的“<768px全宽、≥768px固定宽度”的效果。
修改后的代码片段：

<!-- 仅修改外层容器类即可，剩余代码不变 -->
<div class="container-md">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <!-- 导航栏原有内容 -->
    </div>
  </nav>
</div>

如果需要完全去掉小屏幕下的左右留白，给容器加px-0工具类即可：

<div class="container-md px-0">

方案2：保留.container-lg自定义规则 #

如果你确实需要保留lg级的响应式逻辑，只需在你的style.css中加入以下样式覆盖规则即可：

/* 小于768px时强制全宽 */
@media (max-width: 767.98px) {
  .container-lg {
    max-width: 100%;
    /* 可选：去掉左右内边距 */
    padding-left: 0;
    padding-right: 0;
  }
}

特殊场景：导航栏背景全宽 #

如果你希望导航栏的背景色完全铺满屏幕，仅控制导航内容的宽度，可以把导航栏放在容器外层，单独用容器包裹导航内容：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-md">
    <!-- 导航栏原有内容 -->
  </div>
</nav>

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