虽然Bootstrap文档非常好,但我无法从
documentation中的一个示例中理解导航栏结构.我试图了解导航栏的子组件以及如何使用它们.据我所知,导航栏有两个区域：标题和折叠区域.标题似乎是放置品牌名称(在左侧)和切换按钮在右侧的位置.它似乎也将永远显示的区域.折叠似乎是其他一切的区域,并将折叠为较小的宽度.
>这是正确的理解吗？还有其他方面吗？
>容器 – 流体包装的目的是什么？如果这个包装被删除怎么办？
>每个区域可以有哪些元素？
>如果我不需要任何可折叠部分怎么办？我应该把所有东西放在标题中吗？
>如果我需要三个不可折叠的部分：左,中,右怎么办？
请帮忙.
附：虽然Bootstrap docuentation非常好,但我希望使用某种图表来记录组件,以识别各种子组件及其预期的行为和用途.
编辑
我在Bootstrap Navbar上找到了this tutorial,它有更多的例子 – 非常好.我可以从那里推导出模式,但如果有人能够更明确地表达它们,那将会很好.例如,本教程中的第一个示例有一个div,其中包含类navbar-header,后跟一个没有类且包含所有链接的div.这让我觉得可以根据需要在导航栏中添加尽可能多的div,navbar-header和navbar-collapse只是特殊用途的子组件.
解决方法
基于@ bto.rdz的建议,这是我为#5导航栏提出的左,右部分的解决方案：
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 navbar-text">
<a href="#" class="navbar-link">Left</a>
</div>
<div class="col-xs-4 navbar-text text-center">
<a href="#" class="navbar-link">Middle</a>
</div>
<div class="col-xs-4 navbar-text text-right">
<a href="#" class="navbar-link">Right</a>
</div>
</div>
</div><!-- /.container-fluid -->
</nav>
我想,由于导航栏中有一个容器流体,为什么不为左,右链接创建一个包含3列的行.这几乎可以工作,除了它突破768像素.我将其追溯到Bootstrap,在该断点处添加了15px的左右边距.我按如下方式覆盖此行为,现在我在所有浏览器宽度上都有所需的行为.
.navbar-text {
margin-left: 0;
margin-right: 0;
}