Question

人们通常如何设计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

进行样式设置

这可能是一件非常简单的事情，但似乎无法解决这个问题！

Answer 1

我自己已经解决了这个问题，并且有很多解决方案按顺序我会给他们这样的东西：

参与但值得 - 我已切换到涉及构建引导程序的工作流程。我正在使用带有罗盘和咕噜声等的bootsrap-sass。它处理缩小，连接等任务，在这种情况下，你想要的所有变化都是_variables.scss或.less等..
便宜但有效 - 我使用了一个非常简单的黑客来制作第二个菜单并添加.hidden-phone，.visible-desktop等。这使您可以制作独特的触摸按钮也许放弃崩溃。有点像他们here （它不是引导程序，但它的概念相同）
媒体查询 - 我列表中的最后一个css总是我的responsive.scss或一个充满媒体查询的文件，这样我可以更改我想要覆盖的任何内容。

Answer 2

最简单的解决方案是将主导航的.navbar div包装在带有自定义类的div中 - 比如说，“mainnav”。然后你可以把样式写成“.mainnav .nav li a”。

如果你可以触摸引导程序结构本身，你可以跳过包装器div并简单地将类“mainnav”添加到“navbar”div中，然后编写类似“.mainnav.navbar .nav li a”的样式。 / p>

Answer 3

菜单分为两部分，一个结构和一个样式。如果你删除样式，你会留下一个易于设计的裸引导菜单。删除“navbar-inner”调用，它将为您删除所有样式。我只是将菜单div上的调用从navbar-innner重命名为navbar-inner_OFF。这关闭了-inner css并且还提醒我，当我查看菜单代码时，我把它弄掉了。

风格Twitter引导程序导航

3 个答案: