人们通常如何设计Twitter Bootstrap可折叠导航的输出？
标准结构如下。
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="brand">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
例如，如果我想设置.nav li a的样式，我可以使用CSS选择器来实现，但这也会更改移动导航的样式。Bootstrap似乎没有添加任何有用的类组合来表示不同的类。
<div class="nav-collapse collapse"> <!-- Closed by button -->
<div class="nav-collapse on collapse"> <!-- Open by button -->
<div class="nav-collapse on collapse"> <!-- Closed by resizing window to > mobile -->
我发现自己不得不再次为移动版本有效地实现引导样式，因为我似乎找不到允许我只对主导航而不是下拉菜单进行样式设置的类组合。例如，下拉列表可以使用.nav-collapse.on 进行样式设置
这可能是一件非常简单的事情，但似乎无法解决！
我自己也处理过这个问题，有很多解决方案
按照顺序，我会给他们放一些类似的东西：
- 参与但值得-我已切换到涉及构建引导程序的工作流程。我将bootsrap sass与compass和grunt等一起使用。这可以处理缩小、连接等任务，在这种情况下，还可以处理对_variables.css或.less等的所有更改
- 便宜但有效-我使用了一个非常简单的破解方法，只需制作第二个菜单并添加隐藏的手机、可见的桌面等。这可以让你制作独特的触摸按钮，也许可以放弃折叠。有点像他们在这里所做的（这不是引导程序，但概念相同）
- 媒体查询-我在列表中的最后一个css始终是我的responsive.scss或一个充满媒体查询的文件，这样我就可以从以前为任何设备所做的任何事情更改我想要覆盖的任何内容
最简单的解决方案是将主导航的.navbardiv封装在一个带有自定义类的div中，比如"mainnav"。然后你可以为".mainnav.nav-lia"之类的东西编写样式。
如果您可以触及引导程序结构本身，您可以跳过包装器div，简单地将类"mainnav"添加到"navbar"div中，然后编写类似".mainav.navbar.nav-lia"的样式。
菜单分为两部分，一个结构和一个样式。如果你删除了样式，你会得到一个简单的引导菜单。去掉"导航条内部"的调用，它会为你去掉所有的造型。我只是将菜单div上的调用从navbar-inner重命名为navbar-inner_OFF。这关闭了-internal css，也提醒我在查看菜单代码时关闭了它。