我正在使用bootstrap navbar，我的电脑上有2个徽标navbar。
是否有可能有当第一个标志navbar是collapsed and not expanded，和其他标志时，导航栏是collapsed and expanded。我在检查元素之后尝试了代码，但是没有用。
CSS：
#bs-example-navbar-collapse-1.navbar-collapse.collapse.in{
.logo1 { display:none;}
.logo2 {display:block;}
}
HTML：
<nav class="navbar navbar-inverse navbar-static-top header-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="Logo" href="index.php">
<img src="logo6.jpg" class="logo1 visible-xs" />
<img src="logo.jpg" class="logo2 hidden-xs" />
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
...basic navbar code...
请帮忙。
纯CSS方法：
您可以使用按钮的属性来检测导航栏是在较小的屏幕中折叠还是展开。
@media (max-width: 768px) {
button[aria-expanded="true"] ~ .navbar-brand.expanded-logo {
display: block; /* If aria-expanded is set to true, show the logo for expanded state */
}
button[aria-expanded="false"] ~ .navbar-brand.collapsed-logo {
display: block; /* If aria-expanded is set to false, show the logo for collapsed state */
}
button[aria-expanded="true"] ~ .navbar-brand.collapsed-logo {
display: none; /* Hide the collapsed state logo when the expanded state logo is shown */
}
}
.expanded-logo {
display: none; /* Show only one logo on larger screen, hide logo by default */
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div data-example-id="navbar-static-top" class="bs-example bs-navbar-top-example">
<nav class="navbar navbar-default navbar-static-top">
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
<div class="container-fluid">
<div class="navbar-header">
<button aria-expanded="false" data-target="#bs-example-navbar-collapse-8" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand collapsed-logo">
<img src="http://placehold.it/30x30/333">
</a>
<a href="#" class="navbar-brand expanded-logo">
<img src="http://placehold.it/30x30/666">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="bs-example-navbar-collapse-8" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句