Question

我有这个设置，我将切换显示为响应，我有两组导航菜单，一个显示，另一个隐藏在页面加载，一旦屏幕是480px或低于主站点导航菜单按预期运行并隐藏，但移动导航器不会显示。

这是我的代码，并提前感谢。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

<强> 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样式表中的样式。

将其移至

.mn-nav{
   display:none;
}

你很好。

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

div没有响应display：block;

3 个答案: