Bootstrap 堆叠式导航

堆叠式导航

默认情况下，标签导航和胶囊式导航都是水平排列的。只需再给导航列表额外添加一个 .nav-stacked 类，就可以让导航垂直堆叠排列。如，堆叠式标签导航：

<ul class="nav nav-tabs nav-stacked">

  <li class="active"><a href="#">Home</a></li>

  <li><a href="#">Profile</a></li>

  <li><a href="#">Messages</a></li>

</ul>

效果如图 4‑19所示：

图4-19 Bootstrap堆叠式标签导航再如，堆叠式胶囊导航：

<ul class="nav nav-pills nav-stacked">

  <li class="active"><a href="#">Home</a></li>

  <li><a href="#">Profile</a></li>

  <li><a href="#">Messages</a></li>

</ul>

效果如图 4‑20所示：

图4-20 Bootstrap堆叠式胶囊导航版权声明：本文出自 歪脖网 的《Bootstrap教程》，欢迎在线阅读，并提出宝贵意见。