Bootstrap 4导航栏全宽搜索栏：多词导航链接换行问题求助

这个问题我之前也碰到过，核心原因是你给搜索表单加了w-100，在空间不足时会挤压导航链接的宽度，导致多词文本被迫换行。下面是几个实用的解决思路，亲测有效：

1. 给导航链接添加不换行样式 #

Bootstrap 4自带了text-nowrap类，直接给多词的导航链接加上，就能强制文本保持单行：

<a class="nav-link text-nowrap" href="#">Developer Jobs</a>

如果需要全局生效，也可以自定义CSS：

.nav-link {
  white-space: nowrap;
}

2. 调整搜索栏的宽度策略 #

不要直接用w-100强制搜索栏占满整个宽度，改用响应式宽度类或者弹性布局来分配空间：

• 响应式宽度：用w-md-100代替w-100，让搜索栏只在中等及更小屏幕下占满宽度，大屏幕时留出空间给导航项：

  <form class="ml-3 my-auto d-inline w-md-100">
  

• 弹性填充剩余空间：用flex-grow:1让搜索栏填充导航项之外的剩余空间，这样既保证搜索栏有足够宽度，又不会挤压导航链接：

  <form class="ml-3 my-auto d-inline flex-grow-1">
  

3. 确保导航栏整体不换行 #

给navbar添加flex-nowrap类，阻止整个导航栏的flex元素换行，维持原有高度：

<nav class="navbar navbar-expand-lg navbar-light bg-light flex-nowrap">

完整示例代码 #

把这些调整整合起来，最终的navbar代码大概是这样：

<nav class="navbar navbar-expand-lg navbar-light bg-light flex-nowrap">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link text-nowrap" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-nowrap" href="#">Developer Jobs</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-nowrap" href="#">Another Multi-Word Link</a>
      </li>
    </ul>
    <form class="ml-3 my-auto d-inline flex-grow-1">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search">
        <div class="input-group-append">
          <button class="btn btn-outline-success" type="button">Search</button>
        </div>
      </div>
    </form>
  </div>
</nav>

这样调整后，多词导航链接会保持单行显示，导航栏也不会因为换行而增高，同时搜索栏在各种屏幕尺寸下都能合理布局。

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