为什么将<nav>导航栏元素放置在容器外？

我很好奇，如果有人知道为什么语义导航栏<nav>元素被安置在<div class="container">外面？为什么将<nav>导航栏元素放置在容器外？

从引导导航栏文档： https://getbootstrap.com/components/#navbar

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data- 
toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria- 
expanded="false"> 
    <span class="sr-only">Toggle navigation</span>

我的理解（我认为）是，为了引导对，呃，引导，一切都必须在一个容器>行>山坳。

现在已经使用了它，我明白有一些警告和“它并不总是这么简单”，所以我试图忠实地执行涉及挖掘我的应用程序的前端的球 - 令人烦躁的工作，同时还了解我在做什么。

是答案，正如（我猜测）一样简单，<nav>是创造生活“外”，由于正常的集装箱其特殊的使用情况“特殊”元素（特别是在网站/应用范围的导航的情况下）？我自己采取

步骤：

来自10+ “类似问题”
花时间getbootstrap.com
经过W3Schools的
谷歌搜索"<nav>"

来源

2017-06-22 ScorpIan

罗 - 容器会添加填充任何一方 - 用'

'，'

页面的整个宽度，你可以请一个工作小提琴，所以我们可以仔细看看你的问题 –

@ThisGuyHasTwoThumbs有道理，如果我能弄明白，我会接受这个答案。 – ScorpIan

“我理解（我认为）是，为了Bootstrap，erm，bootstrap，一切都必须在一个容器> r ow> col“ - 让bootstrap网格系统工作 - 是的。但是导航通常不会使用网格系统开始;大多数情况下，您有一个独立于网格的导航，其后是可能使用网格的主页面内容。 - CBroe 1分钟前

这回答了我的问题。谢谢。

来源

2017-06-22 10:58:56 ScorpIan

真正的原因并不是因为导航不使用网格系统，而是因为导航栏栏需要为全角，但其组件与其余页面元素对齐，因此位于子容器内。 – slynagh

这使navbar能够拉伸到全宽 - 它内部的.container约束导航元素本身。看看[https://getbootstrap.com/examples/theme/]你会看到黑暗的导航栏是全角。

没有什么能够阻止你制作多个全宽的部分，每个部分都有自己的.container div。例如，参见[https://getbootstrap.com/examples/jumbotron/] - .jumbotron也有一个child.container，但背景延伸至全宽。

而且，存在什么特别的这意味着它必须坐在容器外部，如本例示出了.navbar元件：[https://getbootstrap.com/examples/carousel/]。

所以使用一个容器，你要设置最大宽度，并确保网格系统的工作。

来源

2017-06-22 11:23:39 slynagh

为什么将<nav>导航栏元素放置在容器外？

回答

相关问题