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

Question

虽然 Bootstrap 文档非常好，但我无法从 documentation 中的一个示例中理解导航栏结构。 .我试图了解导航栏的子组件是什么以及如何使用它们。据我所知，导航栏有两个区域:标题和折叠区域。标题似乎是放置品牌名称(左侧)和右侧切换按钮的地方。它似乎也将始终显示该区域。折叠似乎是其他所有内容的区域，并且会折叠较小的宽度。

这是正确的理解吗？还有其他地区吗？

容器流体包装的目的是什么？如果这个包装被移除怎么办？

每个区域可以放什么样的元素？

如果我不需要任何可折叠部分怎么办？我应该把所有东西都放在标题中吗？

如果我需要三个不可折叠的部分:左、中和右怎么办？

请帮忙。

附言虽然 Bootstrap 文档非常好，但我希望使用某种图表来标识这些组件，以识别各种子组件及其预期行为和用途。

编辑
我找到了 this tutorial在 Bootstrap Navbar 上有更多示例 - 这真的很棒。我可能可以从那里推导出模式，但如果有人能更明确地表达它们会很好。例如，本教程中的第一个示例有一个带有类 navbar-header 的 div，然后是一个没有类并包含所有链接的 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;
}