Bootstrap 4 navbar всегда виден на мобильном телефоне - PullRequest
Новая
       42

Bootstrap 4 navbar всегда виден на мобильном телефоне

1 голос
/ 10 ноября 2019

Мой загрузчик navbar всегда виден на мобильном телефоне. Независимо от того, свернут ли навигационный переключатель или нет.

Вот код. 

<nav class="navbar navbar-expand-lg navbar-light bg-light">
 <div class="container">
  <a class="navbar-brand" href="/"><i class="fas fa-blog"></i>  Tech Info</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
  </button>
  <div class="d-flex flex-row-reverse collapse navbar-collapse" id="navbarSupportedContent1">
   <ul class="nav justify-content-end">
     <% if(!user) { %>
      <li class="nav-item">
       <a class="nav-link my-2 my-sm-0" href="/login">Sing In</a>
      </li>
      <li class="nav-item">
       <a class="nav-link btn btn-outline-primary my-2 my-sm-0" href="/register">Sign Up</a>
      </li>
     <% } %>
   </ul>
  </div>
 </div>
</nav>

Ответы [ 3 ]

0 голосов
/ 10 ноября 2019

Класс d-flex переопределяет поведение navbar-collapse. Если вы хотите изменить направление изгиба, используйте его вместо элемента nav ... 

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="/"><i class="fas fa-blog"></i> Tech Info</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent1">
            <ul class="nav justify-content-end flex-row-reverse">
                <li class="nav-item">
                    <a class="nav-link my-2 my-sm-0" href="/login">Sing In</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Демо: https://www.codeply.com/p/MgNaErmlWm

0 голосов
/ 10 ноября 2019

Цель кнопки должна быть равна div id, который вы хотите свернуть, и удалите d-flex из div.navbar-collapse 

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
  aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
  ...
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
  ...
</div>
0 голосов
/ 10 ноября 2019

navbar не должен быть контейнером вообще. Попробуйте убрать div class = "container".

...