Bootstrap navbar два или более элемента выравнивания - PullRequest
Новая
       0

Bootstrap navbar два или более элемента выравнивания

0 голосов
/ 14 апреля 2020

Так что я пытаюсь сделать сайт для проекта колледжа, и мне нужно сделать навигационную панель с bootstrap. Проблема в том, что когда я добавляю новые элементы nav-item в панель навигации, они располагаются один под другим по оси Y, и я хотел бы выровнять их по горизонтали

это то, что у меня есть до сих пор 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  </head>
  <body>

    <nav class="navbar sticky-top navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Home Page</a>

      <ul class="nav navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Item One</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item Two</a>
        </li>

      </ul>

    </nav>

  </body>
</html>

enter image description here

Так отображаются элементы.

Как я могу выровнять «Элемент Один» и «Элемент Два» по горизонтали?

1 Ответ

1 голос
/ 14 апреля 2020

Согласно документации Bootstrap вы должны указать перенос :

Навбарам требуется перенос .navbar с .navbar-expand { -sm | -md | -lg | -xl} для адаптивных классов свертывания и цветовой схемы.

Просто добавьте это к своему элементу <nav>: 

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Home Page</a>

      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Item One</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item Two</a>
        </li>

      </ul>

    </nav>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...