div 没有响应 display:block;答案

【问题标题】：div is not responding to display:block;div 没有响应 display:block;
【发布时间】：2016-04-13 02:22:40
【问题描述】：

我有这个设置，我将显示切换为响应式，我有两组导航菜单显示，另一组在页面加载时隐藏，一旦屏幕为 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>

【问题讨论】：

<div class="mn-nav" style="display:none;"> 覆盖所有样式表设置。删除内联代码。

标签： html css twitter-bootstrap twitter-bootstrap-3 media-queries

【解决方案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

【讨论】：

@nSamsDev 没问题 :)

【解决方案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 未被应用。

【讨论】：

【解决方案3】：

问题是在<div class="mn-nav" style="display:none;"> 中，样式的优先级高于CSS 样式表中的样式。

把它移到

.mn-nav{
   display:none;
}

你很好。

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

【讨论】：