Question

使用bootstrap的响应式布局是否完美无缺，但是当我通过iPad访问它时，导航栏不会崩溃。

Printscreen - 在iPad上预览：

http://i.stack.imgur.com/RjEJ0.jpg

以下是我的HTML / CSS代码：

HTML：

<header class="header">
    <div class="container">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="navbar-header">
                <button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand scroll-top logo">
                    <img src="assets/images/logo_cass_eventos.jpg">
                </a>
            </div>
            <!--/.navbar-header-->
            <div id="main-nav" class="collapse navbar-collapse">
                <ul class="nav navbar-nav" id="mainNav">
                    <li class="active"><a href="#" class="scroll-link">Home</a></li>
                    <li><a href="#" class="scroll-link">Eventos empresariais</a></li>
                    <li><a href="#" class="scroll-link">Eventos sociais</a></li>
                    <li><a href="#" class="scroll-link">Leme Gourmet</a></li>
                    <li><a href="#" class="scroll-link">Vídeos</a></li>
                    <li><a href="#" class="scroll-link">Depoimentos</a></li>
                    <li><a href="#" class="scroll-link">Imprensa</a></li>
                    <li><a href="#" class="scroll-link">Contato</a></li>
                </ul>
            </div>
            <!--/.navbar-collapse-->
        </nav>
        <!--/.navbar-->
    </div>
    <!--/.container-->
</header>

CSS：

http://pastebin.com/tE5r6nJ9

Answer 1

您需要更改导航栏崩溃断点。

这是将其更改为991px的示例

@media (max-width: 991px) {
    .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;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

导航栏不会在iPad上崩溃[bootstrap 3]

1 个答案: