Bootstrap - 不同的100％宽度菜单

我想做出100％宽度的子菜单。这不应该是导航栏宽度的100％，而应该是宽度页面的100％。我试图设置这个，但我无法管理这个工作。有什么方法可以将ul.sub-menu设为100％的页面宽度？Bootstrap - 不同的100％宽度菜单

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

这是一张图片，显示我尝试存档的重量。如果您点击例如联系人并联系有子菜单，则子菜单会显示在整个宽度页面上。

Thx提供各种帮助。

wireframe of what I want to do

来源

2014-02-26 Charles

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

顶一个需要margin-bottom: 0;添加到它。

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

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

和

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

分别。这些类也需要添加到相应的div，每个小提琴。

小提琴： Example

来源

2014-02-26 20:47:33 user2709361

这是很好的形式给出，但第二导航栏需要显示的子菜单项，形成第一个导航栏。 – Charles

我是不是能够得到这个工作完全。我最终决定使用具有目标ul的数据切换。对不起，标记中的所有垃圾，但代码的主要部分是data-toggle="collapse"和data-target="#menu*"属性。在“课程&费率”和“俱乐部&联赛”下有两个子菜单，其中div均为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 -->

编辑：注意这需要引导的dorpdown js和css

EDIT2：docs here

来源

2014-02-26 21:11:41

Bootstrap - 不同的100％宽度菜单

回答

相关问题