Bootstrap 4：防止导航栏链接在折叠前换行

嘿，我完全懂你遇到的这个困扰——当页面放大（视口宽度缩小但还没触发导航栏折叠）时，导航栏里的链接会提前换行，破坏布局的整洁性。针对Bootstrap 4的这个问题，我给你几个实用的解决方案：

方案1：提前触发导航栏折叠 #

把导航栏的折叠断点调大，让链接在即将换行之前就切换成汉堡菜单，从根源上避免换行问题：

用Sass自定义变量（推荐，适合项目初期） #

如果你的项目用Sass编译Bootstrap，直接修改折叠断点变量：

// 把默认的md断点从992px改成更大的值，比如1200px
$navbar-expand-md: 1200px;
@import "bootstrap";

直接用CSS覆盖（适合已上线项目） #

如果没法改Sass，写自定义CSS强制在指定宽度触发折叠：

@media (max-width: 1199px) {
  .navbar-expand-md .navbar-collapse {
    display: none !important;
  }
  .navbar-expand-md .navbar-toggler {
    display: block !important;
  }
}

你可以根据自己的链接数量调整这个宽度数值，确保在链接要换行前就触发折叠。

方案2：强制链接保持一行，支持横向滚动 #

让导航栏里的链接始终在同一行，空间不足时显示横向滚动条，直到触发折叠：

.navbar-nav {
  white-space: nowrap; /* 强制链接不换行 */
}
.navbar-collapse {
  overflow-x: auto; /* 空间不足时显示横向滚动条 */
}

这个方案的好处是用户在折叠前仍能看到所有链接，只是需要横向滚动查看，适合不想提前折叠的场景。

方案3：优化导航栏元素间距，节省空间 #

通过缩小链接、logo的内边距或尺寸，让同一行能容纳更多链接，延迟换行时机：

// 缩小导航链接的左右内边距
.navbar-nav .nav-link {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
// 缩小品牌logo的字体大小和右边距
.navbar-brand {
  font-size: 1.2rem;
  padding-right: 1rem;
}

这个方法属于微调布局，适合不想改变折叠断点也不想加滚动条的场景。

你可以根据自己的需求选择最适合的方案，比如追求简洁就选方案1，想保留全链接可见就选方案2，微调布局就选方案3~

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