html - CSS 媒体查询不覆盖

标签 html css twitter-bootstrap media-queries

我一直在做 max-width 媒体查询,但我知道 bootstrap 会做 min-width 风格的媒体查询,我试图在我目前的元素。

我有以下类声明(这里没有媒体查询)

.Mobilemenutrigger {
    padding: 2px 12px 2px 12px;
    background: #6bb854;
    display: inline-block;
    float:right;
    margin-right: 20px;
    margin-top: 20px;
}

然后按照 Bootstrap 的媒体查询约定,我有以下内容

@media (min-width: 768px) { 
    .Mobilemenutrigger {
        display: none;
    }
}

但是当我在我的浏览器中查看它时,正在应用原始声明,并且媒体查询并没有像我认为的那样覆盖原始声明。

我知道我可以将 !important 扔到媒体查询上,但我的印象是在执行 min-width 样式媒体查询时不需要这样做.我在这里错过了一些非常明显的东西吗?

最佳答案

确保浏览器在读取初始类属性后读取您的媒体查询。

关于html - CSS 媒体查询不覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28584808/

相关文章:

javascript - 霍根 JS IF 语句

css - Internet 浏览器 CSS : Joomla Custom template

html - 缩小最小屏幕时表单无响应

css - Angular UI Bootstrap 时间和日期选择器 popus 显示在输入下方

java - 在javascript中显示不可编辑的html表格

javascript - 网页如何防止粘贴事件?

html - css bootstrap - 使网站在纵向方向上尽可能小,在横向上尽可能小

javascript - Bootstrap 3 - 将菜单悬停在桌面上,但在最小化时单击打开(移动导航)

javascript - Divs 占据整个页面

javascript - 如何从 Bootstrap 导航栏中删除默认填充