虽然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; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。