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">替换链接元素

然而，结果看起来不对。子列表位于文本的右侧，而不是 enter image description here

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

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

Answer 1

使用此结构

  <nav class="col-xs-3">
    <ul id="sidebar" class="fixed">
        <li>
           historical data
            <ul>
                <li><a href="#GroupASub1"> temperature </a></li>
                <li><a href="#GroupASub2"> humidity</a></li>
            </ul>
        </li>
        <li>
            current data
            <ul>
                <li><a href="#GroupBSub1"> temperature</a></li>
                <li><a href="#GroupBSub2"> humidity</a></li>
            </ul>
        </li>

    </ul>
</nav>

这是一个bootply！

Answer 2

也许你可以调查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文件并将自定义样式放在那里：）

Answer 3

您可以将它们与链接放在同一个<ul>中，然后使用自定义类设置它们的样式：

示例Bootply：http://www.bootply.com/GYJxbRpFS3

HTML

<ul class="nav">
  <li class="sidebar-text">Current data</li>
  <li><a href="#"> Temperature</a></li>
  <li><a href="#"> Humidity</a></li>                        
</ul>

自定义类

.sidebar-text{
  font-size:18px;
  margin:10px;  
  color:white;
}

垂直导航栏中的Bootstrap文本

3 个答案: