Bootstrap导航栏无法在header中横向铺满问题求助

问题根源分析 #

你碰到的这两个问题（导航栏没铺满、出现横向滚动）是关联在一起的：

1. 横向滚动条：Bootstrap的.row类自带margin-left: -15px和margin-right: -15px，如果直接把.row放在页面根元素下（没被.container或.container-fluid包裹），就会超出视口宽度，触发横向滚动。
2. 导航栏未铺满：浏览器默认给body加了margin: 8px，你自定义的header { width: 100%; }是基于带margin的body计算宽度的，导致导航栏实际宽度比视口窄，右侧出现空白。

具体修复步骤 #

步骤1：消除横向滚动

把你的.row包裹在.container-fluid容器里（这个容器自带左右padding，刚好抵消row的负margin）：

<body>
<header>
<nav class="navbar navbar-dark bg-dark sticky-top">
<h2 class="navbar-brand" href="#">Lockerroom Buzz</h2>
</nav>
</header>
<!-- 用container-fluid包裹row -->
<div class="container-fluid">
  <div class="row">
  <div class="col-md-2 vr">
  <h1>First Column</h1>
  </div>
  <div class="col-md-8 vr">
  <h1>Main Column</h1>
  <!-- 文本内容省略 -->
  </div>
  <div class="col-md-2">
  <h1>Last Column</h1>
  </div>
  </div>
</div>
<footer>
<nav class="navbar navbar-dark bg-dark fixed-bottom">Footer</nav>
</footer>
</body>

步骤2：让导航栏铺满视口

移除自定义CSS里多余的header { width: 100%; }，再添加一行CSS清除body的默认margin：

/* 在main.css中添加 */
body {
  margin: 0;
}
/* 删除这行无效代码：header { width: 100%; } */

做完这两步，导航栏就会自动铺满整个视口宽度，横向滚动条也会消失。

额外优化提示

• Bootstrap的.navbar本身就是块级元素，默认宽度就是100%，不需要额外设置宽度属性。
• 你自定义CSS里那些没用到的样式（比如.right、.title）可以暂时注释或删除，避免干扰布局。

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