Question

我刚尝试升级到bootstrap 4（alpha 6）

似乎我遇到了与大多数人相反的问题，因为我的.navbar在桌面视图中的初始页面加载时未按预期折叠。相反，它显示为一个水平列表，它推动.navbar元素占据桌面视图的大约三分之一。但是.navbar在移动视图中不会解开。

这是navbar html render：

    <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a href="http://marvel-adventures.com/" class="navbar-brand">Marvel Adventures</a>
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse" id="navbar-main">
            <ul class="nav navbar-nav">
                <li><a href="http://marvel-adventures.com/aboutus.php">About Us</a>
                </li>
                <li><a href="http://marvel-adventures.com/guides/starter_guide.php" title="A users guide to MA">Guides</a>
                </li>
                <li><a href="http://marvel-adventures.com/surveys/index.php" title="The entrance to our Survey App">Surveys</a>
                </li>
                <li><a href="http://marvel-adventures.com/__demo/" title="Monkee's test file directory">Monkee</a>
                </li>
                <li><a href="http://marvel-adventures.com/characters/index.php" title="Characters, Applications, Faceclaims, Want Ads, and more!">Characters</a>
                </li>
                <li><a href="http://marvel-adventures.com/__demo/contact.php" title="A demo for building postback forms">Contact</a>
                </li>
                <li><a href="http://marvel-adventures.com/user_profileGet.php#" title="modal version of contact form">Modal</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="http://marvel-adventures.com/user/login.php" title="Login to site" target="_blank">Login</a>
                </li>
            </ul>
        </div>
    </div>
</div>

到目前为止，我已尝试解决此问题：

使用chrome来检查导航栏。
检查以确保所有样式表都已加载。
检查所有javascript是否正在加载
检查jQuery是否正在加载一个。用Google搜索可能的解决方案。湾检查堆栈流量以寻找可能的解决方案。

我刚刚升级到bootstrap 4.我查看了stackOverflow并搜索了我的问题，但我还没有找到解决方案。

桌面页面加载时Bootstrap4导航栏未折叠 - 移动视图中

0 个答案: