twitter-bootstrap - 垂直导航栏中的 Bootstrap 文本

Question

我正在尝试在 Bootstrap 3 中组合一个侧边栏，但我希望将一些项目分组在标题下，如下所示

historical data
 temperature 
 humidity
current data
 temperature
 humidity

但是“历史数据”和“当前数据”本身并不是链接——它们只是将相似项目分组在一起的标题。这应该是对基本模式的简单修改，但失败了。

我尝试过的代码是

<ul class="nav navbar-inverse">
  <li>
   <p class="sidebar-text> Historical data</p>
   <ul class="nav">
     <li> <a href="..."> Temperature </a> </li>
     <li> <a href="..."> Humidity </a> </li>
   </ul>
   <li>
  <li>
   <p class="sidebar-text> Live data</p>
   <ul class="nav">
     <li> <a href="..."> Temperature </a> </li>
     <li> <a href="..."> Humidity </a> </li>
   </ul>
   <li>
 </ul>

这与 Bootstrap 文档页面上使用的模式几乎完全相同，除了 Bootstrap 文档使用主要部分的链接，并且我将链接元素替换为 <p class="sidebar-text">

但是，结果看起来不对。子列表放置在文本的右侧而不是文本下方

我做了一个 bootply 演示来查看结果:http://www.bootply.com/XDM10D9I83

有没有办法在不强制节标题成为链接的情况下完成这项工作？

Answer 1

也许你可以看看metisMenu ？它基本上提供了您想要实现的目标:)

或者，如果您已经决定自己制作侧边导航，这就是我的想法。如果我正确理解你的问题，你只是想让你成为 <p>元素的行为类似于 <a> nav 内的元素对吗？

那么为什么不直接定位 css 呢？例如，这里是负责输出 <a> 的原始 CSS标签

.nav>li>a:hover, .nav>li>a:focus {
    text-decoration: none;
    background-color: #eee;
}
.nav>li>a {
    position: relative;
    display: block;
    padding: 10px 15px;
}

您只需将 a 替换为 p 即可定位 <p>元素:

    .nav>li>p:hover, .nav>li>p:focus {
        text-decoration: none;
        background-color: #eee;
    }
    .nav>li>p {
        position: relative;
        display: block;
        padding: 10px 15px;
    }

这将针对那些 <p>导航中的元素，并使其表现得像 <a>元素。当然，这只是一个例子:)你必须获得生成 <a> 的确切 css 字段。按原样执行。

此外，不要覆盖原始 Bootstrap 文件。制作一个单独的 CSS 文件并将您的自定义样式放在那里:)