Bizzare размещение элементов списка на navbar - BOOTSTRAP 4 - PullRequest
0 голосов
/ 25 сентября 2018

Я пытаюсь использовать BOOTSTRAP 4 navbar и вижу на веб-странице следующие результаты.

enter image description here

То, что я на самом деле хочу, этониже:

enter image description here

Я использую следующий код:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">Collapsed content</h4>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>

  <nav class="navbar navbar-dark bg-dark">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="\">
          <h5 class="text-white">
            <i class="fab fa-expeditedssl"></i> &nbsp CVT</h4>
        </a>
      </li>
    </ul>

    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="\">HOME
                        <i class="fas fa-home"></i>
                        <span class="sr-only">(current)</span>
                    </a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="\search">SEARCH
                        <i class="fas fa-search"></i>
                    </a>
      </li>
    </ul>


    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

  </nav>
</div>

Я пытался встроить элементы списка, используя класс list-inline, но ничего не работает.Можете ли вы помочь?Спасибо.

Ответы [ 3 ]

0 голосов
/ 25 сентября 2018

flex-direction из этих ul элементов равно column, поэтому установите значение row для второго ul, чтобы его элементы отображались рядом друг с другом:

ul.ml-auto {
  flex-direction: row;
}

ul.ml-auto li {
  margin-left: 30px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">Collapsed content</h4>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>

  <nav class="navbar navbar-dark bg-dark">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="\">
          <h5 class="text-white">
            <i class="fab fa-expeditedssl"></i> &nbsp CVT</h4>
        </a>
      </li>
    </ul>

    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="\">HOME
                        <i class="fas fa-home"></i>
                        <span class="sr-only">(current)</span>
                    </a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="\search">SEARCH
                        <i class="fas fa-search"></i>
                    </a>
      </li>
    </ul>


    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

  </nav>
</div>
0 голосов
/ 25 сентября 2018

Есть несколько проблем, потому что Navbar не структурирован как типичная Bootstrap 4 Navbar ...

  • Используйте flex-row, чтобы навигационная панель navbar оставалась горизонтальной ввсе ширины

    <div class="pos-f-t">
        <div class="collapse" id="navbarToggleExternalContent">
            <div class="bg-dark p-4">
                <h4 class="text-white">Collapsed content</h4>
                <span class="text-muted">Toggleable via the navbar brand.</span>
            </div>
        </div>
        <nav class="navbar navbar-dark bg-dark">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="\">
                        <h5 class="text-white">
                <i class="fab fa-expeditedssl"></i> &nbsp; CVT</h5>
                    </a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto flex-row">
                <li class="nav-item active">
                    <a class="nav-link px-2" href="\">HOME
                            <i class="fas fa-home"></i>
                            <span class="sr-only">(current)</span>
                        </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link px-2" href="\search">SEARCH
                            <i class="fas fa-search"></i>
                        </a>
                </li>
            </ul>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </nav>
    

https://www.codeply.com/go/zED6d4TC8B

0 голосов
/ 25 сентября 2018

В вашем теге <nav> должен быть атрибут navbar-expand, например navbar-expand-md.Из документов :

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

...