有人可以帮我在我正在处理的响应式Bootstrap单页模板上应用正确的媒体查询。 我设法显示从240px到640px宽度而不是高达980px的切换菜单按钮,但我无法显示从640px到980px的主导航菜单。 在980px之后它再次显示正常。
这是我为切换菜单按钮创建的媒体查询:
@media (min-width: 639px) {
.btn-navbar {
display: none;
}
}
这里是整个标题部分的html:
<!-- header -->
<div class="masthead">
<div class="stripes"></div>
<div class="container">
<!-- button for small devices-->
<div class="row no-margin">
<div class="span12">
<div class="hidden-desktop"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-align-justify"></span></a></div>
<div class="brand"> <a href="#intro"><img src="img/logo.png" alt="" /></a></div>
<!-- navigation -->
<div class="navbar main-nav">
<div class="nav-collapse collapse" >
<ul class="nav pull-right ">
<li><a href="#intro">Home</a></li>
<li><a href="#work">Intro</a></li>
<li><a href="#services">Amulets</a></li>
<li><a href="#blog">Gallery</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- end navigation -->
</div>
<!-- end container -->
</div>
<!-- end header-->
我尝试了所有我能想到但却无法做到的事情。 非常感谢任何帮助。
答案 0 :(得分:-1)
你可以尝试简单地使用!important
指令:
@media (min-width: 639px) {
.btn-navbar { display: none !important; }
}
当然,这不是最优雅的解决方案。 但是你的问题似乎与你的风格有关,而不是你的标记。 它最有可能是相互冲突的风格。 我认为对于这个问题,我们必须深入研究整个样式表才能找到问题。
另请注意,.btn-navbar
链接位于<div>
类.hidden-desktop
内。