Question

我制作了一个折叠移动设备的引导导航栏。当缩小浏览器大小时它可以在我的电脑上工作，它可以在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会以某个宽度折叠，这取决于引导程序版本，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的值。这应该有用。

Bootstrap折叠导航栏按钮在横向模式下工作，但不在纵向模式下工作

1 个答案: