【发布时间】：2016-01-21 21:10:52
【问题描述】：
我正在使用引导程序创建导航菜单。我希望基本导航是第二行，我想要一些杂项。快速链接挂出作为顶行。
在研究了几个示例并将它们组合在一起之后，我有了一个似乎可行的解决方案（见下文），但有一个例外......
当我折叠菜单时，顶部栏将链接包裹得很好......根据需要，但是一旦我获得小型设备的汉堡菜单，我的第二个导航栏就会向上推并隐藏顶部导航栏项目。 Grr ...我就是不能停止这种行为。
我应该在哪里寻找？
<nav class="navbar navbar-inverse navbar-fixed-top">
<div id="topBar">
<div class="container">
<div class="row">
<div class="col-md-3 col-xs-12" >
<ul class="top-links list-inline">
<li class="hidden-xs"><a href="@Url.Action("Index", "Contact")"><i class="fa fa-envelope"></i> CONTACT</a></li>
<li class="hidden-xs"><a target="_blank" href="https://get.teamviewer.com/xxxxx"><i class="fa fa-medkit"></i>Quick Support</a></li>
</ul>
</div>
<div class="col-md-9 col-xs-12">
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
</div>
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("xxxxxxx.Net", "Index", new { controller = "Home" }, new { @class = "navbar-brand" })
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
... menu stuff here removed for simplicity
</ul>
</div>
<div class="navbar-header navbar-lower" role="navigation">
<div class="container">
<div class="collapse navbar-collapse collapse-buttons">
<ul class="nav navbar-nav navbar-right">
<li id="home">
@Html.ActionLink("Home2", "Index2", "Home")
</li>
<li id="about">
@Html.ActionLink("About", "Index", "About")
</li>
<li id="services">
@Html.ActionLink("Services", "Index", "Services")
</li>
<li id="contact">
@Html.ActionLink("Contact", "Index", "Contact")
</li>
<li id="portfolio" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Portfolio <b class="caret"></b></a>
<ul class="dropdown-menu">
<li id="1columnportfolio">
@Html.ActionLink("1 Column Portfolio", "OneColumn", "Portfolio")
</li>
<li id="2columnportfolio">
@Html.ActionLink("2 Column Portfolio", "TwoColumn", "Portfolio")
</li>
<li id="3columnportfolio">
@Html.ActionLink("3 Column Portfolio", "ThreeColumn", "Portfolio")
</li>
<li id="4columnportfolio">
@Html.ActionLink("4 Column Portfolio", "FourColumn", "Portfolio")
</li>
<li id="singleportfolioitem">
@Html.ActionLink("Single Portfolio Item", "SingleItem", "Portfolio")
</li>
</ul>
</li>
<li id="blog" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog <b class="caret"></b></a>
<ul class="dropdown-menu">
<li id="bloghome1">
@Html.ActionLink("Blog Home 1", "Home1", "Blog")
</li>
<li id="bloghome2">
@Html.ActionLink("Blog Home 2", "Home2", "Blog")
</li>
<li id="blogpost">
@Html.ActionLink("Blog Post", "Post", "Blog")
</li>
</ul>
</li>
<li id="other" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Other Pages <b class="caret"></b></a>
<ul class="dropdown-menu">
<li id="fullwidthpage">
@Html.ActionLink("Full Width Page", "FullWidth", "Other")
</li>
<li id="sidebarpage">
@Html.ActionLink("Sidebar Page", "Sidebar", "Other")
</li>
<li id="faq">
@Html.ActionLink("FAQ", "Faq", "Other")
</li>
<li id="404">
@Html.ActionLink("404", "FourOhFour", "Other")
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
【问题讨论】：
标签： jquery html css twitter-bootstrap