Bootstrap折叠菜单展开时不应占满屏幕宽度

没问题，我帮你搞定这个折叠导航栏的宽度调整需求！Bootstrap 3默认的折叠导航栏会占满屏幕宽度，主要是因为.navbar-collapse类自带了width: 100%的样式，咱们只需要覆盖这个默认规则，再微调布局就能实现宽度适配内容的效果。

具体实现方案 #

1. 添加自定义CSS样式 #

针对小屏幕（Bootstrap 3的响应式断点是767px），给折叠后的导航菜单设置自适应宽度的样式：

@media (max-width: 767px) {
  /* 覆盖默认的100%宽度，让菜单由内容撑开 */
  .navbar-collapse.collapse.in,
  .navbar-collapse.collapsing {
    width: auto;
    float: none;
    margin: 8px auto 0; /* 可选：让菜单居中，上下留点间距 */
    background-color: #ffffff; /* 可选：设置背景色，和导航栏主体区分开 */
    border-radius: 4px; /* 可选：添加圆角，让样式更柔和 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 可选：加个阴影增强层次感 */
  }

  /* 可选：强制导航项文本不换行，避免内容被挤压 */
  .navbar-nav > li > a {
    white-space: nowrap;
    padding-left: 16px;
    padding-right: 16px;
  }
}

2. 调整细节（按需选择） #

如果你的导航栏有自定义背景色，记得把上面的background-color改成和你的设计匹配的颜色；如果不需要居中菜单，把margin改成margin: 8px 0 0让它左对齐就行。

3. 测试验证 #

打开浏览器的开发者工具，切换到小屏幕响应式模式，点击折叠按钮展开菜单，就能看到菜单宽度自动适配内容的效果了。如果有布局细节需要调整，再微调CSS里的padding、margin等属性即可。

原理说明 #

• width: auto会让元素宽度根据内部内容的最大宽度自动计算，替代默认的全屏宽度。
• float: none避免浮动导致的宽度计算异常，确保自适应宽度生效。
• 额外的背景色、圆角和阴影是为了让折叠菜单视觉上更独立，提升用户体验，你可以根据自己的需求取舍。

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