引导程序崩溃导航栏按钮在横向但不是纵向模式下工作

我制作了一个用于移动设备折叠的引导程序导航栏。它在缩小浏览器尺寸时可以在我的电脑上运行，并且可以在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

引导程序崩溃导航栏按钮在横向但不是纵向模式下工作

回答

相关问题