Question

我想：

显示图像 - 如果菜单已扩展
显示文字 - 如果菜单已折叠（当出现＆＃34; 3行按钮＆＃34;时）

这是我的代码：

<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

我想你想要自助式responsive utility classes。

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

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

Answer 2

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

当屏幕大小超过768像素时，

navbar-toggle启动：

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

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

2 个答案: