Bootstrap collapse Навигационная кнопка работает в режиме пейзажа, но не в портретном режиме

Question

Я создал загрузочную навигационную панель, которая рушится для мобильных устройств. Он работает на моем компьютере при уменьшении размера браузера, и он работает на экране. Однако, когда я посещаю сайт на своем телефоне (iPhone 6S), кнопка работает, только когда телефон находится в ландшафтном режиме. Я понятия не имею, почему это происходит. Любые идеи почему? Благодаря

навигационная панель

<button id="nav-btn"class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
</button> 
<div class="container"> 
    <a class="navbar-brand" href="#"><img src="Images/logo.png" width="60px"></a> 
    <div class="collapse navbar-collapse" id="navbarDiv"> 
     <ul class="navbar-nav mr-auto"> 
      <li class="nav-item active"> 
       <a class="nav-link" href="#home" >Home <span class="sr-only">(current)</span></a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#about-us" >About</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#pricing" >Pricing</a> 
      </li> 
     </ul> 
    </div> 
</div> 
</nav> 

Answer 1

По умолчанию бутстрапа разрушается при определенной ширине, которая зависит от начальной загрузки версии, 768px в целом.

Что вы можете сделать, добавьте запрос css.

@media (max-width: 990px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin: 7.5px -15px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
} 

Изменить значение max-width по ширине ландшафтного режима телефона. Это должно сработать.