如何在 Menu Collapse 中隐藏 div

Question

我终于得到了适用于 Bootstrap Angular UI 的折叠菜单。但是我仍然无法弄清楚如何隐藏 "hide-mobile" class 的 div 并在移动视图中显示 "show-mobile" class 。

目前，它显示了两者。我应该为此使用@media 查询还是有更好的方法来隐藏隐藏移动设备div?

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="navbar-header">
                    <button type="button" class="navbar-toggle" ng-init="navCollapsed = false" ng-click="navbarCollapsed = !navbarCollapsed">
                            <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="hide-mobile">
                        <a class="navbar-brand" href="#">
                            Web-LOGO
                        </a>
                    </div>
                    <div class="Show-mobile">
                        <a class="navbar-brand" href="#">
                            Mobile-LOGO
                        </a>
                    </div>
            </div>

            <div class="collapse navbar-collapse" collapse="navbarCollapsed">
                    Awesome Mobile Links
            </div>
    </nav>

Answer 1

而不是 hide-mobile 和 show-mobile 试试 hidden-xs 和 visible-xs

如何在 Menu Collapse 中隐藏 div

How to hide a div in Menu Collapse

angularjs

angular-ui

angular-ui-bootstrap

angularjs-bootstrap