Css 当窗口变小时，导航栏消失

标题可能有点误导，但我不能100%确定这种效果是如何被称为。我很确定我的意思是，我的导航栏正在消失，而不是崩溃

然而，我的设置是这样的-我正在处理

ASP.NET MVC 4

项目的

Layout

视图。我使用的是

bootstrap3x

，但也包含了

jQuery

libs，因此我的

部分如下所示：

@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

在正文中，我希望有两个

导航栏

和一个侧面菜单，这两个菜单对我的所有页面都是一样的，但我注意到，当我开始在某个点缩小窗口，而不是获得类似于（注意到元素如何重新定位）的效果时，我的

导航栏

都消失了，我看不到它们

我的第一个

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>

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

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

1

二,

三,

四,

五,

因此，当我将窗口缩小到足以使导航栏消失时，唯一剩下的就是渲染视图中的

1..5

数字

我只测试了一个

导航栏

（对另一个进行了注释）-无论对哪一个进行了注释，当我缩小窗口时，我都会松开导航栏。如何使用

bootstrap3x

？

开始阅读您的示例，在使用v3的同时使用Twitter的bootstrapv2

一些注意事项：

• v3没有容器流体类
• 不支持jqueryv2（使用最新的v1）
• 引导不支持页面上的多个导航栏，另请参见：和
• 您的第二个导航栏缺少一个类，请参见：

---

导航栏的结构似乎与中概述的不匹配

特别是，您正在将

.navbar collapse

和

.collapse

放在主navbar div上。我相信，当屏幕宽度达到某个点时，该类会隐藏其中的所有内容，以便它可以执行与您在文档中链接的内容类似的操作

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

---

PS-类

.container fluid

不再存在。只需将

.container

与Bootstrap 3一起使用。

好吧，我试图避免复制粘贴，只是理解了什么是做什么，但现在我只是从官方网站（您提供的网站）上复制粘贴了示例中的代码，它正在工作。但我真的很想知道我的逻辑在哪里断裂，很明显，我想为我想要切换的项目定义按钮的整个概念，但我仍然在为一些更详细的信息而奋斗，你能提供一些关于这个主题的更详细的信息源吗？你想知道为什么你的代码不能工作的细节吗，或者为什么导航栏的结构是这样的？谢谢你的帮助，今晚我读了很多书，我在bootstrap中了解了导航栏背后的基本概念。还有很多事情还不清楚，但我会针对不同的问题提出新的问题。这个问题解决了。

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

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