引導程序崩潰導航欄按鈕在橫向但不是縱向模式下工作

我製作了一個用於移動設備摺疊的引導程序導航欄。它在縮小瀏覽器尺寸時可以在我的電腦上運行，並且可以在screenfly上運行。但是，當我在手機（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>

來源

2017-02-23 RT5754

你可以做一個小提琴或給你的網站的鏈接？ – Sasith

默認情況下，引導倒塌在一定寬度取決於引導版本，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的值。這應該工作。

來源

2017-02-23 05:31:12 radbrawler

引導程序崩潰導航欄按鈕在橫向但不是縱向模式下工作

回答

相關問題