如何防止Bootstrap 3导航栏随浏览器窗口缩放变形？

嘿，别担心！刚学Web开发一个月遇到这种问题太正常了，我来一步步帮你搞定～

你已经给主体部分加了固定宽度的约束：div style="min-width: 960px; margin: 0 auto;"，但导航栏还在变形，核心原因是Bootstrap 3的navbar组件默认是100%宽度，会自适应浏览器窗口大小，所以得给它也加上同样的宽度限制。

这里有两种简单的解决方法，你可以选适合自己的：

方法1：给导航栏套固定宽度容器 #

直接把导航栏放在你已经用的那个固定宽度居中容器里，和主体内容保持一致：

<!-- 固定宽度容器 -->
<div style="min-width: 960px; margin: 0 auto;">
  <!-- 导航栏 -->
  <nav id="navbar1" class="jumbotron navbar navbar-default ">
    <!-- 你的导航栏内容（比如菜单、logo等） -->
  </nav>

  <!-- 你的主体内容 -->
  <!-- ... -->
</div>

这样导航栏就会被容器限制宽度，和主体一起保持固定的最小宽度，不会随窗口缩放变形了。

方法2：直接给导航栏加样式约束 #

如果不想把导航栏和主体放在同一个容器里，也可以直接给nav标签添加内联样式：

<nav id="navbar1" class="jumbotron navbar navbar-default " style="min-width: 960px; margin: 0 auto;">
  <!-- 导航栏内容 -->
</nav>

不过要注意：jumbotron类默认有左右padding，可能会让导航栏实际宽度略大于960px，如果你觉得宽度不对，可以额外加padding-left: 0; padding-right: 0;调整样式。

额外小提示（可选） #

如果你想完全禁用导航栏的响应式折叠（比如小屏幕下不想变成汉堡菜单），还需要：

• 移除导航栏里的navbar-toggle、collapse相关的HTML元素
• 给navbar-nav添加navbar-left类，让菜单保持横向排列

这样就能彻底让导航栏和主体一样，无论窗口大小都保持固定宽高啦！

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