Bootstrap - 不同的100％宽度菜单

Question

我想制作100％宽度的子菜单。这不应该是导航栏宽度的100％，而是宽度页面的100％。我正在尝试设置这个，但我无法管理这个工作。有没有办法将ul.sub-menu设置为100％的页面宽度？

100％宽度有很多解决方案，但它始终是导航栏宽度的100％而不是页面。

这是一张图片，展示了我试图实现的目标。如果单击例如联系人和联系人有子菜单，则子菜单显示在整个宽度页面上。

Thx提供各种帮助。

Answer 1

您可以使用2个静态顶部导航栏，而无需将其添加到.col-sx-12

最上面的一个需要添加margin-bottom: 0;。

确保更改每个折叠按钮的data-target。

data-target=".navbar-collapse-1"

和

data-target=".navbar-collapse-2"

分别。这些类还需要根据小提琴添加到适当的div。

小提琴： Example

Answer 2

我无法彻底完成这项工作。我最终决定使用目标ul的数据切换。很抱歉标记中的所有垃圾，但代码的主要部分是data-toggle="collapse"和data-target="#menu*"属性。 “课程与费率”和“俱乐部与联赛”下有两个子菜单，div个{100}宽度为100％，ul个.container为<!-- primary nav --> <ul class="nav navbar-nav navbar-right primary"> <li class="dropdown"> <a href="#" class="collapsed no-transition" data-toggle="collapse" data-target="#menu1">Courses &amp; Rates <b class="caret"></b></a> <div class="collapse no-transition" id="menu1"> <ul class="container"> <li><a href="/course/elmwood/">Elmwood Golf Course</a></li> <li><a href="/course/prairie-green/">Prairie Green Golf Course</a></li> <li><a href="/course/kuehn-park/">Kuehn Park Golf Course</a></li> <li><a href="/green-fees/">Green Fees</a></li> </ul> </div> <li class="dropdown"> <a href="#" class="collapsed no-transition" data-toggle="collapse" data-target="#menu2">Clubs &amp; Leagues <b class="caret"></b></a> <div class="collapse no-transition" id="menu2"> <ul class="container"> <li><a href="/clubs-and-leagues/mens-golf-club/">Sioux Falls Men's Golf Club</a></li> <li><a href="/clubs-and-leagues/ladies-clubs">Ladies Golf Leagues</a></li> <li><a href="/clubs-and-leagues/junior-golf/">Junior Golf</a></li> <li><a href="/clubs-and-leagues/high-school-golf/">High School Golf</a></li> <li><a href="/clubs-and-leagues/first-tee/">The First Tee</a></li> <li><a href="/clubs-and-leagues/rockafellow-scholarship/">Rockafellow Scholarship</a></li> </ul> </div> <li><a href="/events/">Events</a></li> <li><a href="/news/">News</a></li> <li><a href="/shop/">Pro Shop</a></li> </ul><!-- end primary nav --> 。当然，你不能拥有导航的父容器。

{{1}}

编辑：请注意，这需要bootstrap的dorpdown js和css

EDIT2：docs here