Twitter Bootstrap Navbar：如何创建两个单独的行？答案

【问题标题】：Twitter Bootstrap Navbar: How to create two separate rows?Twitter Bootstrap Navbar：如何创建两个单独的行？
【发布时间】：2013-01-09 03:41:56
【问题描述】：

我正在使用 Twitter 引导程序在顶部创建我的固定导航栏，我想模仿 Kickstarter's 导航栏之类的东西，他们在“发现”和“伟大的项目”之间创建了一条新线。我尝试使用转义符“\n”和“”（我意识到 br 前面有一个空格）来创建一个新行，但它弄乱了导航栏其余部分的格式，并将徽标向上推。创建 2 行但保持导航栏的整体高度的正确方法是什么？

【问题讨论】：

标签： css twitter-bootstrap navbar

【解决方案1】：

<ul class="nav">
  <li>
    <a href="#">
      <span class="li-head">Discover</span>
      <span class="li-tail">great projects</span>
    </a>
  </li>
</ul>

.nav li a > span { display:block; }

【讨论】：

谢谢卡尔文！唯一的问题是，当我将鼠标悬停在“发现”上时，它只突出显示“发现”而不是“伟大的项目”。将它们结合起来的最佳方法是什么？我尝试为
取一个 id 名称，但这改变了导航栏中其他链接的位置，并使所有内容看起来都消失了

你是如何处理悬停的？将鼠标悬停在“发现”或“伟大的项目”上将悬停在相同的标记

我正在使用 Twitter bootstrap 的 Less 变量，如下所示：@\navbarLinkColor:@\white; @\navbarLinkColorHover：@\橙色；。但是，白色或橙色不适用于您的代码，所以我不得不重新输入。有没有办法让你的链接连接到@\navbarLinkColor？