在自举4

Question

我使用自举v4和我根据http://v4-alpha.getbootstrap.com/components/navbar/创建固定顶部导航栏创建导航栏和子导航栏。

但我想要的是在导航栏中创建另一行。所以我实际上需要两个相邻的导航栏。

我试图简单地用

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    // first line 
    </div> 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    // second line 
    </div> 
</nav> 

这样做，但它没有得到一个新行。它只是试图并排添加它。

一种方式是后对方只是创建两个导航栏，但我想第二条线是一样的第一道防线。

Answer 1

上面的代码有三个问题。首先，你错过了关闭第一个<div>，这可能是为什么navbars坐在一起。其次，您使用重复ID navbarSupportedContent。第三，你实际上没有任何按钮来切换你的导航栏，所以它们根本不会出现在移动显示屏上。

要解决在手机上能够切换多个导航栏的问题，您需要将navbar-collapse作为包含两个导航栏div的单个父div。

因此，你实际上可能寻找的是这样的：

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon">Toggle Navigation</span> 
    </button> 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <div> 
    // first line 
    </div> 
    <div> 
    // second line 
    </div> 
    </div> 
</nav> 

我创建了一个BootPly展示这个here。

编辑：

默认情况下，引导4使用flex的导航栏，但默认情况下不实际添加所需的flex-flow。您可以解决此通过添加：

.navbar-collapse { 
    flex-flow: row wrap; 
} 

需要注意的是，你还需要一个flex-direction添加到您的行，并指定他们应该占据柔性的宽度的100％。我给的DIV这一类flex-row（在flex.scss默认名称）：

.flex-row { 
    flex-direction: row; 
    width: 100%; 
} 

我创建了一个新的BootPly覆盖这个here。

希望这会有所帮助！ :)