Question

标题可能有点误导，但我不能100％确定如何调用此效果。我很清楚我的意思是我的导航栏正在消失，而不是崩溃。

但我的设置是这样的 - 我正在研究Layout项目的ASP.NET MVC 4视图。我正在使用bootstrap 3x但也包含jQuery个库，所以我的<head>部分是这样的：

@Scripts.Render("~/Scripts/bootstrap.min.js")
@Styles.Render("~/Content/bootstrap.css")
@Styles.Render("~/Content/themes/base/jquery.ui.smoothness.css")
@Scripts.Render("~/Scripts/jquery-2.0.3.min.js")
@Scripts.Render("~/Scripts/jquery-ui-1.10.3.min.js")
//just skipped the standard stuff

在身体中我希望有两个navbars和一个侧面菜单，对于我的所有页面都是相同的但是我注意到当我开始在某个时候缩小窗口而不是获得效果时类似于this example（注意到元素如何重新定位）我只是让我的navbars都消失了，我看不到它们。

我的第一个navbar的标记是：

<div class="navbar navbar-static-top navbar-inverse navbar-collapse collapse" role="navigation">
        <ul class="nav navbar-nav ">
            <li><a href="#">Info</a></li>
            <li><a href="#">Info</a></li>
        </ul>
    </div>

，第二个是：

<div class="navbar navbar-collapse collapse" role="navigation" id="main-navigation-bar">
        <ul class="nav nav-pills nav-justified">
            <li style="border: 1px solid grey"><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>

事实上，_Layout机构中唯一剩下的就是：

<div class="container-fluid">
        @RenderBody()
    </div>

仅用于编译目的并呈现此视图：

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>

因此，当我使窗口足够小以使我的导航栏消失时，唯一剩下的就是渲染视图中的1..5个数字。

我只测试了一个navbar（另一个评论） - 无论评论哪一个，当我缩小窗口时，我松开了导航栏。如何使用bootstrap 3x保留它们？

Answer 1

在您使用v3时，开始阅读Updating Bootstrap to version 3 - what do I have to do?您的示例使用Twitter的Bootstrap v2。

一些注意事项：

v3没有容器流体类
不支持jQuery v2（使用最新的v1）
Bootstrap不支持页面上的多个导航栏，另请参阅：https://github.com/twbs/bootstrap/issues/10229和Multiple navbars on the same page with Twitter's Bootstrap 3
您的第二个导航栏错过了一个课程，请参阅：https://github.com/twbs/bootstrap/issues/10332

Answer 2

导航栏的结构似乎与docs for the navbar中列出的内容不相符。

特别是，您要删除主导航栏div上的.navbar-collapse和.collapse。我相信当屏幕宽度达到某个点时，这个类隐藏了它内部的所有内容，因此它可以做类似于你在文档中链接的内容。

我打赌，如果你重新构建你的导航栏以匹配文档中的内容，你将消除你所看到的问题。

PS - 班级.container-fluid不再存在。只需使用.container和Bootstrap 3。

当窗口太小时，导航栏消失

2 个答案: