Question

我很好奇是否有人知道为什么语义Navbar <nav>元素位于外部<div class="container">之外？

来自Bootstrap Navbar文档： 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>

我的理解（我认为）是，为了Bootstrap to，erm， bootstrap ，一切都必须在容器中＆gt;行＆gt;栏第

现在使用了一下，我知道有一些警告和＃34;它并不总是那么简单＆＃34;因此，我试图忠实地执行这项涉及挖掘应用程序前端的繁琐乏味的工作，同时也了解我正在做的事情。

答案就像（我的猜测）一样简单，<nav>是一个特殊的＆＃34;为生活而创造的元素＆＃34;外部＆＃34;普通容器由于其特殊用例（特别是在站点/应用程序范围的导航的情况下）？

我自己采取的步骤：

评论10+＆＃34;类似问题＆＃34;
花时间在getbootstrap.com
检查过w3schools
Google搜索"<nav>"

Answer 1

“我的理解（我认为）是，为了Bootstrap to，erm，bootstrap，一切都必须在容器中＆gt;行＆gt; col“ - 用于引导网格系统工作 - 是的。但导航通常不会使用网格系统开始;主要是你有一个独立于网格的导航，然后是可能使用网格的主页面内容。 - CBroe 1分钟前

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

Answer 2

这使得导航栏可以拉伸到最大宽度 - 其中的.container约束导航元素本身。看[https://getbootstrap.com/examples/theme/]你会看到黑色导航条是全宽的。

没有什么可以阻止你制作多个全宽度的部分，每个部分都有自己的.container div。有关示例，请参阅[https://getbootstrap.com/examples/jumbotron/] - .jumbotron也有一个子.container，但背景拉伸到全宽。

此外，.navbar元素没有什么特别之处，这意味着它必须位于容器之外，如下例所示：[https://getbootstrap.com/examples/carousel/]。

因此，请使用要设置最大宽度的容器，并确保网格系统正常工作。

为什么<nav> Navbar元素放在容器外面？

2 个答案: