Bootstrap 3导航栏的结构是什么？

Question

虽然Bootstrap文档非常好,但我无法从文档中的一个示例中了解导航栏结构.我试图了解导航栏的子组件以及如何使用它们.据我所知,导航栏有两个区域:标题和折叠区域.标题似乎是放置品牌名称(在左侧)和切换按钮在右侧的位置.它似乎也将永远显示的区域.折叠似乎是其他一切的区域,并将折叠为较小的宽度.

1. 这是正确的理解吗？还有其他方面吗？
2. 容器 - 流体包装的目的是什么？如果这个包装被删除怎么办？
3. 每个区域都可以有哪些元素？
4. 如果我不需要任何可折叠部分怎么办？我应该把所有东西放在标题中吗？
5. 如果我需要三个不可折叠的部分:左,中,右怎么办？

请帮忙.

PS虽然Bootstrap docuentation非常好,但我希望使用某种图表来记录组件,以识别各种子组件及其预期的行为和用途.

编辑 我在Bootstrap Navbar上发现了这个教程,里面有很多例子 - 非常好.我可以从那里推导出模式,但如果有人能够更明确地表达它们,那将会很好.例如,本教程中的第一个示例有一个div,其中包含类navbar-header,后跟一个没有类且包含所有链接的div.这让我觉得可以根据需要在导航栏中添加尽可能多的div,navbar-header和navbar-collapse只是特殊用途的子组件.

Answer 1

根据 @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;
}