7.5.10 导航条中的组件的排列方式

发表于 2019-07-31 更新于 2020-02-07 分类于 5 疯狂前端开发讲义JQuery AngularJS Bootstrap前端开发实战，第7章 Bootstrap内置组件， 7.5 导航 Waline：本文字数： 374 阅读时长 ≈ 1 分钟

正如在前面示例中看到的,Bootstrap 还提供了如下两个样式来控制导航条中组件的排列方式。

样式	描述
`.navbar-left`	让导航条中的组件靠左排列。
`.navbar-right`	让导航条中的组件靠右排列。
这两个样式都会通过`CSS`设置特定方向的浮动样式,它们其实是`.pull-left`和`.pull-right`的`mixin`版本,只不过它们都使用了特定的媒体查询(`media query)`限制,因此可以更好地在各种尺寸的屏幕上处理导航条组件。
需要说明的是,`Bootstrap`导航条目前最多只支持一个组件使用`.navbar-right`样式—这是因为`Bootstrap`为最后一个被指定`.navbar`-`right`样式的元素使用负的`margin`。如果有多个元素使用`.navbar-right`样式,则它们的`margin`将会出现问题。