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

发布时间：2020-12-18 00:29:01 所属栏目：安全来源：网络整理

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

虽然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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!