Bootstrap导航栏适配问题：搜索框不扩展&切换按钮右对齐

我帮你调整了代码，完美解决你提到的两个问题——小屏幕下搜索表单换行、切换按钮右对齐，同时修复了输入框固定宽度的问题。以下是修改后的完整代码和关键说明：

修改后的代码 #

<nav class="navbar navbar-expand-sm navbar-light bg-light d-flex flex-row justify-content-between">
  <a class="navbar-brand" href="{{route('homepage')}}">ODekh</a>
  
  <!-- 切换按钮：用ml-auto实现flex布局下的右对齐 -->
  <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <!-- 搜索表单：添加flex-wrap和w-100确保小屏幕换行，输入框实现响应式宽度 -->
  <form method="get" action="{{route('product.search')}}" id="nav-form" class="form-inline flex-wrap w-100 justify-content-center mt-2 mt-sm-0">
    <div class="input-group mb-3 w-100">
      <input class="form-control flex-grow-1" type="search" placeholder="Search Books, Authors" aria-label="Search" id="search" name="search" value="">
      <div class="input-group-append border-0 bg-white">
        <button class="btn btn-outline-secondary" type="submit"><span class="fa fa-search"></span></button>
      </div>
    </div>
  </form>
  
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="">Books</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Cart</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Login</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="">My Account</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="">Logout</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

关键修改点详解 #

1. 切换按钮右对齐问题 #

你之前用float-right无效，是因为导航栏是flex容器（d-flex），float类在flex布局中不生效。我给按钮添加了ml-auto类：

• ml-auto会让按钮左侧自动填充剩余空间，从而把按钮推到容器的最右侧，完美适配flex布局。

2. 搜索表单换行与输入框响应式宽度 #

• 给表单添加flex-wrap：允许表单内的元素在小屏幕（sm及以下）自动换行，避免挤在一起。
• 给表单和input-group都添加w-100：确保它们占满父容器的宽度，为输入框扩展提供空间。
• 给输入框添加flex-grow-1：让输入框在input-group中占据所有剩余空间，不再固定13rem宽度，会随屏幕尺寸自动伸缩。
• 额外加了mt-2 mt-sm-0：小屏幕下给表单添加上边距，和上方的品牌、按钮分隔开，大屏幕下取消这个边距保持紧凑布局；justify-content-center让小屏幕下搜索框居中，视觉更友好。

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