logo标签列表

Twitter Bootstrap 导航栏：如何创建两行？

csstwitter-bootstrapnavbar
3

我正在使用 Twitter Bootstrap 创建固定的顶部导航栏，想要模仿类似 Kickstarter 导航栏的效果，在“Discover”和“great projects”之间创建一行新内容。我尝试使用转义符“\n”以及“< br />”（注意：br 前面有空格）来换行，但是这会破坏其余导航栏的格式并将标志向上推。有没有正确的方式创建两行内容，并保持导航栏的总高度？

1个回答
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; }
谢谢你，Calvin！唯一的问题是当我将鼠标悬停在“Discover”上时，它只会突出显示“Discover”，而不是“great projects”。最好的方法是如何将它们组合起来？我尝试为<li>创建一个id名称，但这改变了导航栏中其他链接的位置，并使一切看起来不协调。 - kibaekr
你是如何处理悬停的？正确的做法是将鼠标悬停在“Discover”或“great projects”上时，会悬停在同一个<a>标签上。 - Calvin
我正在使用Twitter Bootstrap的Less变量，像这样：@\navbarLinkColor: @\white;@\navbarLinkColorHover: @\orange;。然而，白色或橙色并不适用于您的代码，所以我不得不重新输入。有没有办法让您的链接与@\navbarLinkColor连接起来？ - kibaekr
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接