如何将表单元素（搜索栏）放入导航栏的中心？答案

【问题标题】：How to put form element (search bar) into the center of the navbar?如何将表单元素（搜索栏）放入导航栏的中心？
【发布时间】：2020-05-07 22:55:25
【问题描述】：

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">Bootstrap</a>
  <div class="d-flex justify-content-center">
    <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>
  </div>
</nav>

我试图将元素放在导航栏的中心。但不是放置在导航栏的中心，而是放置在导航栏的末端。那么如何将这个搜索栏放在导航栏的中心呢？

【问题讨论】：

您应该在您的问题中包含相关的 HTML 和 CSS - 懒惰地截取您的浏览器的屏幕截图不是我们可以提供的任何帮助。您的问题必须包含minimal, reproducible example
@Shiny 对不当行为感到抱歉，刚刚添加了代码示例。我希望你能在这件事上提供帮助。
这能回答你的问题吗？ Bootstrap Center Navbar Items

标签： html css twitter-bootstrap twitter-bootstrap-3 bootstrap-4

【解决方案1】：

如果您试图将导航栏中的所有元素居中，您可以通过在导航中使用 justify-content-center 类来实现

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-light bg-light justify-content-center">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">Bootstrap</a>
  <div class="d-flex">
    <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>
  </div>
</nav>

如果您试图将搜索块移动到导航栏的中间，您可以在nav 块的末尾添加一个空的div，并将justify-content-between 类添加到nav 元素.

免责声明：这不是一个非常干净的解决方案

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-light bg-light justify-content-between">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">Bootstrap</a>
  <div class="d-flex">
    <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>
  </div>
  <div></div>
</nav>

【讨论】：

【解决方案2】：

您应该能够查看此网站https://hackerthemes.com/bootstrap-cheatsheet/ 并查看可用的不同类型的导航栏，并了解在 HTML 中移动搜索引擎的结构。

【讨论】：

这不是一个完整的答案，它应该作为评论放置。如需完整答案，请提出具体解决方案并添加说明。