Question

我正在使用Bootstrap3。我有一个带有徽标的navbar，但我只想在navbar折叠时显示徽标。我有太多的下拉菜单，因此当navbar没有折叠时，徽标不适合（也不好看）。

我最初是visible-xs课，但我的导航栏上有自定义折叠点，因此这不会正确隐藏徽标。

是否有办法仅在navbar折叠时显示图片？

<nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <div class="row">
                    <div class="col-xs-4">
                        <a href="#" class="navbar-left"><img src="Images/Logo_small.gif"></a>
                    </div>
                    <div class="col-xs-8">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                </div>
            </div>

Answer 1

第一个理解： 如果你希望你的徽标在菜单消失时消失，并且汉堡包版本没有使用你提到的BS默认类visible-xs，你可以在css媒体查询中添加一些css规则

@media (min-width: custom collapse point-min) and (max-width: custom collapse point-max) {
    .navbar-collapse {
        .logotohide { display: none; } // or opacity: 0 or whatever
    }
}

因此，如果自定义点对于collasping和徽标隐藏是相同的，那么这将完成这项工作。

第二个理解： 通常情况下，当您打开导航栏时，它会有一个新类（带有responsiv汉堡包菜单图标）。然后你可以简单地使用css来隐藏这个特定类的导航栏元素。

例如：

    .navbar-collapse.collapse {
        .logotohide { display: none; } // or opacity: 0 or whatever
       // using LESS 
      &.in { .logotohide { display: block; } }
    }
   // without LESS
    .navbar-collapse.collapse.in {
        .logotohide { display: block; } // or opacity: 1 or whatever
    }

当你的导航栏由于其崩溃状态而拥有一个新课程时，第二个css规则将获得权力！

导航栏折叠时显示图像

1 个答案: