4.7.4　导航条中的项进行左右浮动

在导航条的各种菜单项容器（如ul、p等元素）上设置.navbar-left样式或navbar-right样式，即可让该容器元素左右浮动。这些样式是.pull-left和.pull-right的mixin版本，但是它们被限定在了媒体查询中，这样可以更容易地在各种尺寸的屏幕上处理导航条组件。示例代码如下：

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Brand</a>
    </div>
    <p class="navbar-text navbar-left">左浮动</p>
    <p class="navbar-text navbar-right">右浮动</p>
</nav>

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

图4-45　导航条中的左右浮动运行效果

但是这两个样式只在普通的宽屏浏览器（大于768像素）上才能使用，在窄屏浏览器上是无效的。源码如下：

// 源码3838行
@media (min-width: 768px) {     /*宽屏情况下*/
  .navbar-left {
    float: left !important;     /*左浮动*/
  }
  .navbar-right {
    float: right !important;    /*右浮动*/
  }
}