0

标题可能有点误导，但我不能 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和一个侧边菜单，这对于我的所有页面都是相同的，但我注意到当我开始在某个时候缩小窗口而不是获得类似于此示例的效果时（注意到元素被重新定位）我刚把我的两个都弄走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？

4

2 回答 2

1

开始阅读将 Bootstrap 更新到版本 3 - 我需要做什么？当您使用 v3 时，您的示例使用 Twitter 的 Bootstrap v2。

一些注意事项：

于 2013-11-12T21:51:49.080 回答
1

导航栏的结构似乎与navbar 文档中概述的内容不匹配。

特别是，您将.navbar-collapseand.collapse放在主导航栏 div 上。我相信当屏幕宽度达到某个点时，此类会隐藏其中的所有内容，以便它可以执行类似于您在文档中链接的内容。

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

PS - 该课程.container-fluid不再存在。只需.container与 Bootstrap 3 一起使用。

于 2013-11-12T21:52:01.107 回答