2017-03-09 28 views
0

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

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

我试图简单地用

<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> 

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

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

回答

0

上面的代码有三个问题。首先,你错过了关闭第一个<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

希望这会有所帮助! :)

+0

谢谢,但它似乎工作在Bootstrap 3,但不在Bootstrap 4中http://www.bootply.com/kEkDapU1QY – Jamgreen

+0

我已更新我的答案,以涵盖Bootstrap 4使用Flexbox的事实:) –