Question

我正在使用angularJS和bootstrap 3.2。我使用导航栏和一些项目。使用bootstrap的默认行为是在折叠发生时，如果单击新出现的按钮，则可以在下拉面板中显示相同的导航栏项目。

在折叠模式下，如何在下拉列表中显示不同的项目。我想在angularJS和bootstrap中使用尽可能多的内置功能，并最大限度地减少黑客攻击和解决方法。

<nav class="navbar navbar-default navbar-fixed-top" ng-controller="HeaderCtrl">
<div class="container-fluid">
    <div class="navbar-header">
        <button id="collapse-button" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"  aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <div class="logo left navbar-brand">
            <a href="#!/main">
                <img src="logo.png" />
            </a>
        </div>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" ng-cloak>
        <div class="navbar-avatar clearfix flLeft">
            <img src="avatar.png" title="" />
        </div>
    </div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->

例如，我希望这个“avatar.png”以不同方式显示（例如圆形或矩形），如果它在导航栏上或通过单击折叠按钮显示。

Answer 1

您使用css媒体查询：

.buttons-i-only-show-when-collapsed {
    display: none;
}

@media (max-width: 767px) {
    .buttons-i-only-show-when-collapsed {
        display: block;
    }
}

Answer 2

.hide-only-if-collapsed {
    display: block;
}

.show-only-if-collapsed {
    display: none;
}

@media (max-width: 767px) {
    .show-only-if-collapsed {
        display: block;
    }    
    .hide-only-if-collapsed {
        display: none;
    }
}

接受微小修改后，回答作品

Answer 3

只需在要隐藏的div处添加.hidden-xs

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <div class="row hidden-xs">

和visible-xs你要显示的div

<div class="row visible-xs">

如何在导航栏中显示不同的项目以及单击折叠按钮时

3 个答案: