需要帮助分配正确的媒体查询

时间:2013-04-26 16:15:10

标签: html5 css3 twitter-bootstrap media-queries

有人可以帮我在我正在处理的响应式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-->

我尝试了所有我能想到但却无法做到的事情。 非常感谢任何帮助。

1 个答案:

答案 0 :(得分:-1)

你可以尝试简单地使用!important指令:

@media (min-width: 639px) {
    .btn-navbar { display: none !important; }
}

当然,这不是最优雅的解决方案。 但是你的问题似乎与你的风格有关,而不是你的标记。 它最有可能是相互冲突的风格。 我认为对于这个问题,我们必须深入研究整个样式表才能找到问题。

另请注意,.btn-navbar链接位于<div>.hidden-desktop内。