Как исправить загрузочную навигационную кнопку в центре - PullRequest
Новая
       10

Как исправить загрузочную навигационную кнопку в центре

1 голос
/ 23 марта 2019

У меня проблема с навигацией начальной загрузки 4, я хочу установить левый логотип / бренд и центральную кнопку навигации и правый логин / кнопку «Моя учетная запись», я попытался решить эту проблему, но когда я нажимаю кнопку навигации на мобильном телефоне, она неожиданно уходитнаправо, пожалуйста, посмотрите на кодовую игру http://codeply.com/go/8FOVzFRkfM

<nav class="navbar navbar-expand-md navbar-light" >
    <div class="container"> <a class="navbar-brand text-primary" href="#">
        <i class="fa d-inline fa-lg fa-stop-circle"></i>
        <b> BRAND</b>
      </a> <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse" data-target="#navbar4">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbar4">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item bg-white border-success"> <a class="nav-link" href="#">Features</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#">FAQ</a> </li>
        </ul> 
      </div>
      <span> <a class="btn navbar-btn ml-md-2 btn-light bg-info">My Account</a></span>
    </div>

  </nav>

Ответы [ 2 ]

0 голосов
/ 23 марта 2019

Вам просто нужно использовать order-md-0 order-last navbarcollapse, чтобы он располагался last на ширине экрана мобильного телефона (когда сворачивается Navbar) ... 

 <div class="collapse navbar-collapse order-md-0 order-last" id="navbar4">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item bg-white border-success"> <a class="nav-link" href="#">Features</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">FAQ</a> </li>
    </ul> 
 </div>

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

Связанный: Начальная загрузка NavBar с выровненными по левому, среднему или правому краю элементами

0 голосов
/ 23 марта 2019

container внутри navbar - это flex с justify-content: space-between, следовательно, изначально скрытое значение navbar-collpase отображается при переключении, которое перемещается ниже.

Решение. Установка абсолютного значения navbar-collpase относительно панели навигации решит проблему.

Пример: 

@media only screen and (max-width: 600px) {
  .navbar-collapse{
        position: absolute;
        width: 100%;
        top: 56px; /*height of navbar in mobile*/
    }
}
...