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％寬度菜單

回答

相關問題