如何将表单元素(搜索栏)放入导航栏的中心? [英] How to put form element (search bar) into the center of the navbar?

问题描述

<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>

我试图将元素放在导航栏的中央.但不是放置在导航栏的中心，而是放置在导航栏的末尾.那么如何将该搜索栏放置在导航栏的中央?

I was trying to put element in the center of the Navbar. But isn't placing in the center of the Navbar it places at the end of the Navbar. So how can I place this search bar in the center of the Navbar?

推荐答案

如果您尝试将导航栏中的所有元素居中，则可以通过在导航中使用justify-content-center类来做到这一点

If you are trying to center all the elements in the navbar, you can do that by using the justify-content-center class in the 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-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元素

If you are trying to move the search block to the middle of the navbar, you could add an empty div to the end of the nav block, and add the justify-content-between class to the nav element.

免责声明:这不是一个很干净的解决方案

Disclaimer: This is not a very clean solution

<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>

这篇关于如何将表单元素(搜索栏)放入导航栏的中心?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！