Как поместить элемент формы (панель поиска) в центр панели навигации? - PullRequest
Новая
       41

Как поместить элемент формы (панель поиска) в центр панели навигации?

0 голосов
/ 21 января 2020 
<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>

Я пытался поместить элемент в центр Навбара. Но он не помещается в центр Навбара, а помещается в конце Навбара. Итак, как я могу разместить эту панель поиска в центре Navbar? Search bar placing at the end of the Navbar

Ответы [ 2 ]

0 голосов
/ 21 января 2020

Если вы пытаетесь центрировать все элементы в панели навигации, вы можете сделать это, используя класс 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>

Если вы пытаетесь переместить блок поиска в середину панели навигации, вы можете добавить пустой div в конец блока nav, и добавьте класс 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>
0 голосов
/ 21 января 2020

Вы сможете просмотреть этот веб-сайт https://hackerthemes.com/bootstrap-cheatsheet/ и увидеть различные типы доступных панелей навигации, а также понять структуру для перемещения поисковой системы в HTML.

...