Bootstrap导航栏布局问题：输入框与搜索按钮无法横向排列求助

嘿，作为Bootstrap新手碰到这种布局小坑太正常啦！我来帮你搞定导航栏里搜索框和按钮换行的问题～

你遇到的核心问题是没有给搜索表单/元素加上合适的Flex布局类，Bootstrap的导航栏在默认情况下，内部的块级元素可能会因为空间不足或者布局规则自动换行。这里有两个最直接的解决办法：

方法1：用Bootstrap内置的input-group组件（最推荐） #

这个组件专门用来把输入框和关联按钮组合在一起，自动实现横向排列，还自带合适的间距和适配性：

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <!-- 这里放你的导航品牌、菜单等其他内容 -->
    <form class="d-flex" role="search">
      <div class="input-group">
        <input class="form-control" type="search" placeholder="搜索内容" aria-label="搜索">
        <button class="btn btn-outline-light" type="submit">搜索</button>
      </div>
    </form>
  </div>
</nav>

方法2：给表单加Flex布局类 #

如果不想用input-group，也可以直接给表单加上d-flex，同时给输入框加flex-grow-1让它自动占满剩余空间，按钮就会紧跟在旁边：

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <!-- 其他导航内容 -->
    <form class="d-flex" role="search">
      <input class="form-control flex-grow-1 me-2" type="search" placeholder="搜索内容" aria-label="搜索">
      <button class="btn btn-outline-light" type="submit">搜索</button>
    </form>
  </div>
</nav>

为啥之前的尝试没效果？ #

大概率是你没有用到Bootstrap的Flex布局类（比如d-flex），或者没有把输入框和按钮放在同一个具备横向布局能力的容器里。Bootstrap的样式都是基于类的，直接改现有类如果没找对关键点自然没用～

试试上面的代码，应该就能让按钮和输入框乖乖横向排列啦！

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