Bootstrap 导航栏表单

Question

我复制粘贴了一个引导导航并将其添加到我的部分文件夹中。我将这个部分包含在我渲染的每个 ejs 文件中。 问题是表单和按钮像这样堆叠在一起：

this is how it looks like

我做错了什么？

    <nav class="navbar navbar-light bg-light justify-content-between">
    <a class="navbar-brand">Navbar</a>
    <form class="form-inline">
      <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>
  </nav>

Answer 1

如果要确保按钮不换行，我建议使用.input-group，如下所示：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light bg-light justify-content-between">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <div class="input-group">
      <input class="form-control" type="search" placeholder="Search" aria-label="Search">
      <div class="input-group-append">
        <button class="btn btn-outline-success input-group-text" type="submit">Search</button>
      </div>
    </div>
  </form>
</nav>

Answer 2

你犯了一些错误。我为你做了一个sn-p。看看吧。

稍后谢谢我。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light bg-light justify-content-between">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <div class="form-group my-0">
      <input class="form-control" type="search" placeholder="Search" aria-label="Search">
    </div>
    <button class="btn btn-outline-success my-0 ml-2" type="submit">Search</button>
  </form>
</nav>