yamm菜單中不同行的標誌和菜單項

Question

我嘗試使用bootstrapjs yaml菜單。如何在瀏覽器窗口調整大小時將徽標和多選項目假裝爲兩行？我想讓那個右上角的「漢堡包」更早出現，而我調整窗口縮小範圍。

<header> 
    <nav class="navbar yamm navbar-fixed-top headerBg headerText" id="heading"> 
     <style>@media (min-width: 767px) { .dropdown:hover .dropdown-menu { display: block; } }</style> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" class="navbar-toggle"> 
        <span class="icon-bar" style="height:3px;"></span> 
        <span class="icon-bar" style="height:3px"></span> 
        <span class="icon-bar" style="height:3px"></span> 
       </button> 
       <a href="#" class="navbar-brand"> 
        <div style="background: transparent url('img/logo.png') no-repeat scroll center center;background-size: contain;width:100px;height:25px;"></div> 
       </a> 
      </div> 
      <div id="navbar-collapse-1" class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <?php for($i = 1; $i < 12; $i++):?> 
        <li class="dropdown"> 
         <a href="#" class="headerText">Item <?php echo $i;?></a> 
        </li> 
        <?php endfor;?> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</header> 

謝謝

Answer 1

看來你需要一點CSS來管理，它可能看起來就像這樣

@media only screen and (min-width: MORE_EARLIER_PIXELS) { 
    .dropdown-menu, .navbar-collapse.in { 
     display: block; 
    } 

    .navbar-collapse{ 
     display:none; 
    } 
}