Bootstrap导航栏问题：搜索栏布局调整与折叠按钮失效

问题1：桌面端搜索栏靠左显示，同时避免小屏布局异常 #

原因 #

原代码中搜索表单放在navbar-collapse容器外部，Bootstrap导航栏默认采用flex布局，外部元素会被推至右侧；小屏时，外部的搜索表单会和折叠的导航内容挤在一起，导致布局错乱。

解决步骤 #

把搜索表单移入navbar-collapse容器内部，放在导航菜单之后，同时借助Bootstrap的响应式flex类，确保小屏时元素自动换行，避免挤压：

修改后的核心结构：

<div class="collapse navbar-collapse d-flex flex-lg-row flex-column">
  <a class="navbar-brand" href="#">Brand Name</a>
  <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
    <!-- 导航项 -->
  </ul>
  <!-- 把搜索表单移到这里 -->
  <form class="form-inline my-2 my-lg-0">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</div>

• d-flex：确保容器使用flex布局
• flex-lg-row：大屏（≥992px）时元素横向排列，搜索栏自然靠左
• flex-column：小屏时元素纵向排列，避免布局挤压

问题2：小屏折叠按钮点击无反应 #

原因 #

Bootstrap 4的折叠组件依赖jQuery和Popper.js，你仅引入了Bootstrap CSS，缺少必要的JS依赖文件，导致交互功能失效。

解决步骤 #

在页面底部（</body>标签前）引入以下JS文件：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

完整可运行代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="App">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse d-flex flex-lg-row flex-column" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="#">Brand Name</a>
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Products</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

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