如何判斷導航欄是爲了切換在導航欄列表項倒塌

顯示圖像 - 如果菜單擴展
顯示文本 - 如果菜單處於摺疊狀態（當「3條線按鈕」出現）

這裏是我的代碼：

<nav class="navbar navbar-idebaca navbar-fixed-bottom"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" 
       data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#"><img src="img/iebaca.png"></a> 
    </div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <li> 
       <img ng-show="somethingt to catch if the menu is collapsed" 
        src="img/button-aree.png"> 
       <a id="areelink" href="#" 
        ng-hide="somethingt to catch if the menu is collapsed" 
        ng-click="sendmessage('')">Aree</a> 
      </li> 
     </ul> 
    </div> 
</nav>

來源

2014-06-27 Davide Dave Al' Thor Tarantino

：當屏幕尺寸越過768像素

導航欄撥動踢'如果菜單是「擴展」，則顯示圖像 - 是否當菜單打開並且菜單導航可見時是指？或者你是否試圖在不同的屏幕尺寸上獲得不同的行爲？ –

我試圖在不同的屏幕尺寸上獲得不同的行爲！ –

我想你想引導的responsive utility classes。

hidden-sm類將在小屏幕上隱藏一個元素。

的visible-sm-block，visible-sm-inline，visible-sm-inline-block類將顯示元素只在小屏幕上。

來源

2014-06-27 12:11:53

我嘗試過：

Aree

但它不起作用！ –

只能用這種方式：

Aree

–

所以，你只想要菜單顯示在lg上，並顯示在md，sm和xs上的按鈕？ – M21B8

Bootstrap將所有內容都包含在標準CSS中，如果你看看這個：http://getbootstrap.com/components/#navbar-default它有一個非常好的演示如何做到這一點，我建議從這開始，然後修改它到顯示你想要的內容。

@media (min-width: 768px) 
.navbar-toggle { 
    display: none; 
}

那麼你可以使用崩潰和導航欄崩潰控制擴展模式用於大屏幕顯示：

.collapse { 
    display: none; 
} 

@media (min-width: 768px) 
.navbar-collapse.collapse { 
    display: block!important; 
    height: auto!important; 
    padding-bottom: 0; 
    overflow: visible!important; 
}

來源

2014-06-27 12:55:33 M21B8

如何判斷導航欄是爲了切換在導航欄列表項倒塌

回答

相關問題