如何判断导航栏是否折叠，以便切换导航栏列表中的项目

Question

我想:

• 显示图像-如果菜单被扩展
• 显示文本-如果菜单被折叠(当"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>

Answer 1

我想你需要bootstrap的响应实用程序类。

hidden-sm类将在小屏幕上隐藏元素。

visible-sm-block, visible-sm-inline, visible-sm-inline-block类将在小屏幕上仅显示元素

Answer 2

Bootstrap将其全部包含在标准CSS中，如果你看这个:http://getbootstrap.com/components/#navbar-default它有一个很好的演示如何做到这一点，我建议从这个开始，然后修改它以显示你想要的内容。

当屏幕尺寸超过768像素时，导航条切换开始生效:

@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;
}