html - Bootstrap 折叠导航栏按钮适用于横向但不适用于纵向模式

Question

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

Answer 1

默认情况下，bootstrap 会以特定宽度折叠，这取决于 bootstrap 版本，一般为 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 的值。这应该有效。