Я пытаюсь добавить три иконки в правом углу, поиск, звонок уведомления и пользователя. Я не хочу рушиться, так как это для настольного приложения Electron, а навигационная панель должна быть исправлена.

<nav class="navbar navbar-dark bg-dark">
          <a class="navbar-brand" href="#">Navbar</a>
          <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link p-2" href="#">
              <img src="node_modules/bootstrap-icons/icons/search.svg" alt="">
            </a></li>
            <li class="nav-item"><a class="nav-link p-2" href="#">
              <img src="node_modules/bootstrap-icons/icons/bell.svg" alt="">
            </a></li>
            <li class="nav-item"><a class="nav-link p-2" href="#">
              <img src="node_modules/bootstrap-icons/icons/person.svg" alt="">
            </a></li>
          </ul>
        </nav>

При этом значки появляются одна за другой вертикально, что расширяет панель навигации. Как мне это исправить? Я относительно новичок в Bootstrap.

-1
Shiladitya Bose 20 Дек 2019 в 16:37

3 ответа

Лучший ответ

Вот коды и ящик, где он работает

    <nav class="navbar navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Navbar</a>
      <ul class="nav d-flex">
        <li class="nav-item">
          <a class="nav-link p-2" href="#">
            <img src="node_modules/bootstrap-icons/icons/search.svg" alt="" />
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link p-2" href="#">
            <img src="node_modules/bootstrap-icons/icons/bell.svg" alt="" />
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link p-2" href="#">
            <img src="node_modules/bootstrap-icons/icons/person.svg" alt="" />
          </a>
        </li>
      </ul>
    </nav>

Вот кодовый ящик, где он работает https://codesandbox.io/s/weserved-wildflower-86fv8

1
Lalji Tadhani 20 Дек 2019 в 14:01

Дайте отображение: встроенный блок для тега ul и li.

ul.navbar-nav, li.nav-item{
	display: inline-block;
}
<nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link p-2" href="#">
        <img src="node_modules/bootstrap-icons/icons/search.svg" alt="">
      </a></li>
      <li class="nav-item"><a class="nav-link p-2" href="#">
        <img src="node_modules/bootstrap-icons/icons/bell.svg" alt="">
      </a></li>
      <li class="nav-item"><a class="nav-link p-2" href="#">
        <img src="node_modules/bootstrap-icons/icons/person.svg" alt="">
      </a></li>
    </ul>
  </nav>
1
Akshita Karetiya 20 Дек 2019 в 13:49

Существует ответ переполнения стека, который решает вашу проблему ,

Извлекая код из этого ответа, вы сможете правильно настроить панель навигации:

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="navbar-brand" href="#">Navbar</a>
            </li>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link p-2" href="#">
                <img src="node_modules/bootstrap-icons/icons/search.svg" alt="">
              </a></li>
              <li class="nav-item"><a class="nav-link p-2" href="#">
                <img src="node_modules/bootstrap-icons/icons/bell.svg" alt="">
              </a></li>
              <li class="nav-item"><a class="nav-link p-2" href="#">
                <img src="node_modules/bootstrap-icons/icons/person.svg" alt="">
              </a></li>
        </ul>
</nav>

Единственное, что здесь имеет значение, это mr-auto в первом ul. на этой странице вы найдете более подробное объяснение, чтобы понять, как оно работает.

1
Nicolas HERMET 20 Дек 2019 в 14:17