div 没有回应 display:block；

Question

我在将显示切换为响应式时进行了此设置，我有两组导航菜单，当屏幕为 480 像素或低于主站点时，一组在页面加载时显示，另一组隐藏导航菜单按预期运行并被隐藏，但移动导航不会显示。

下面是我的代码，在此先感谢。

@media screen and (max-width: 480px) {
  .mn-nav {
    display: block;
  }

  .main-site-nav {
    display: none;
  }
}

<div class="container">
  <div class="mn-nav" style="display:none;">
    <div class="col-md-12">
      <select width="100%" name="m-nav">
        <option value="select">Profile Menu</option>
        <option value="social">Social</option>
        <option value="profile">My Profile</option>
        <option value="media">My Media</option>
      </select>
    </div>
  </div>

  <div class="main-site-nav">
    <div class="col-md-3">
      <button id="social-button" style="width:100%;" class="btn btn-primary">Social</button>
    </div>

    <div class="col-md-3">
      <button id="profile-button" style="width:100%;" class="btn btn-primary">My Profile</button>
    </div>

    <div class="col-md-3">
      <button id="media-button" style="width:100%;" class="btn btn-primary">My Media</button>
    </div>

    <div class="col-md-3">
      <a href="/logout">
        <button style="width:100%;" class="btn btn-danger">Logout</button>
      </a>
    </div>
  </div>
</div>

Answer 1

样式 已应用 ，但您的内联 display 样式优先于样式 sheet 中的样式，因此变得多余。删除内联样式并将其添加到媒体查询之前的样式sheet中：

HTML

<div class="mn-nav" style=""><!-- Inline style removed -->
  <div class="col-md-12">
    <select width="100%" name="m-nav">
      <option value="select">Profile Menu</option>
      <option value="social">Social</option>
      <option value="profile">My Profile</option>
      <option value="media">My Media</option>
    </select>
  </div>
</div>

CSS

.mn-nav{
    display: none;
}

@media  screen and (max-width:480px) {
    .mn-nav {
        display:block;
    }
    .main-site-nav {
        display:none;
    }
}

Bootply

Answer 2

发生这种情况是因为您将 display: none; 设置为内联样式。

html:

<div class="mn-nav">
    <div class="col-md-12">
        <select width="100%" name="m-nav">
            <option value="select">Profile Menu</option>
            <option value="social">Social</option>
            <option value="profile">My Profile</option>
            <option value="media">My Media</option>
        </select>
    </div>
</div>

css:

.mn-nav { 
    display: none;
}

@media  screen and (max-width:480px) {
    .mn-nav {
        display: block;
    }


    .main-site-nav {
        display: none;
    }

}

您的内联样式优先于您在 css 文件中设置的样式。因此 display: block 未被应用。

Answer 3

问题在于 <div class="mn-nav" style="display:none;"> 中的样式比 CSS 样式 sheet 中的样式具有更高的优先级。

移至

.mn-nav{
   display:none;
}

而且你很好。

参考：CSS which takes precedence, inlne or the class?

div 没有回应 display:block；

div is not responding to display:block;

html

css

media-queries

twitter-bootstrap

twitter-bootstrap-3