4.6.4　自适应导航

4.6.4　自适应导航

对于自适应导航，同按钮组的.btn-group-justified样式一样，可以将li元素充满整个父容器，其样式为. nav-justified。使用时只需要在.nav-tabs或.nav-pills样式基础上再附加上它就可以了。示例代码如下：

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

上述代码的运行效果如图4-34所示。

4.6.4　自适应导航 - 图1 图4-34　自适应导航运行效果

实现方式也一如既往，在宽度为100%的基础上，设置每个元素的display风格是table-cell。源码如下：

// 源码3592行
.nav-justified {
  width: 100%;          /* 宽度充满父元素 */
}
.nav-justified > li {
  float: none;          /* 取消浮动 */
}
.nav-justified > li > a {
  margin-bottom: 5px;
  text-align: center;   /* 文本居中 */
}
.nav-justified > .dropdown .dropdown-menu {
  top: auto;
  left: auto;
}
@media (min-width: 768px) {
  .nav-justified > li {
    display: table-cell;        /* 表格风格显示，一个按钮代表一个表格单元格样式 */
    width: 1%;
  }
  .nav-justified > li > a {
    margin-bottom: 0;
  }
}

上述代码中有一句@media (min-width: 768px)媒体查询，也就说只有在大于768像素的浏览器上才有这样的显示效果，小于该像素的话，将分别显示两种堆叠式导航，如图4-35所示。

4.6.4　自适应导航 - 图2 图4-35　自适应导航在小分辨率下的运行效果

由于.nav-tabs样式的导航带有灰色边框，所以在进行处理的时候（也就是同时应用.nav-tabs.nav-justified样式的时候），作者为了应对这些边框和圆角又单独设置了很多内容。由于内容很简单，大家可以自行参考源代码的3541～3569行。

另外，在Bootstrap.css源码里，还定义了一种.nav-tabs-justified样式，看名称可能是又对选项卡导航专门定义了一种样式，可是笔者试了多种使用方式，显示都很凌乱，而且作者的官方网站也没有提及这个样式，所以很有可能是作者还未完善的一种样式吧。

4.6.4 自适应导航