Question

我试图建立一个Twitter Bootstrap网站。这种包装关系使我困惑。我列出了两个演示之间的主要区别。

    <div class="navbar navbar-default">
    <div class="container">
            <a href="" class="navbar-brand">chyang.net</a>
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="">Page 1</a></li>
                <li><a href="">Page 2</a></li>
                <li><a href="">Page 3</a></li>
            </ul>
        </div>
    </div>
    </div>

第二个： Demo site / JS Bin

    <div class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <a href="" class="navbar-brand">chyang.net</a>
            <button type="button" class="navbar-toggle" datatoggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="">Page 1</a></li>
                <li><a href="">Page 2</a></li>
                <li><a href="">Page 3</a></li>
            </ul>
        </div>
    </div>
    </div>

主要区别在于<div class="navbar-header">是否应该包裹<a href="" class="navbar-brand">chyang.net</a>。两者都在同样的结果中运作良好，我不知道两个演示的区别。在我看来，导航栏品牌应该在导航栏标题内...但为什么第一个起作用呢？

参考截图： navbar-header and navbar-brand relationship

Answer 1

根据getbootstrap.com上的文档，是，您应该将它们包装起来，以便与引导程序布局保持一致。你给出的第一个例子是有效的，因为它仍然是有效的HTML + CSS并且渲染类似;这没有错，只是反对bootstrap文档概述的navbar元素的实现。

虽然您可以在 navbar-header div之外功能性地显示它，正如文档在"Default navbar" section中解释的那样，有一条注释说明“品牌和切换按钮分组为更好的移动显示“，隐含在 navbar-header 下。将您的品牌包装在 navbar-header div中，以便与实现引导程序布局保持一致。

摘录：

<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">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
...

这也反映在the Bootstrap starter template下，首先在the Examples section on the Getting Started page下找到。

Answer 2

是<div class="navbar-header">应该包裹<a href="" class="navbar-brand">chyang.net</a>并仔细查看移动设备（xs screen）网站上您将意识到设计上的差异。两者的left-margin/padding在mobile上有所不同。
人们不太可能意识到这一点略有不同。未包装的那个的对齐在移动设备上略微偏离，因此您应该将其包裹起来。在移动设备上的对齐方式略有不同。仔细看看这个。

navbar-header是否应该在Twitter Bootstrap中包装navbar-brand？

2 个答案: