媒体查询不起作用

Question

似乎我已经正确地完成了所有操作，但这根本行不通。 检查元素时也不会显示。 要检查是否为媒体查询，请尝试设置其他bg颜色。

@media screen and (max-width:1050px) {
  #hmbn {
    width:400px !important;
    background-color:red !important;
  }
}

div放置在引导程序行内

http://jsfiddle.net/CH8Hb/

Answer 1

这是由#hmbn的浮动元素#hmbn

Bootstrap在clearfix中有一个buiilt。 将类clearfix添加到#hmbn

<div id="hmbn" class="clearfix">
    ...
</div>

工作演示

---

问题编辑后，以下内容不再适用...

删除;

@media screen (max-width:1050px) {

Answer 2

试试这个，它将正常工作！

@media (max-width: 1050px) {
    #hmbn {
        width:400px;
        background-color:red;
    }
}

演示

很重要：

这将正常工作： 演示

@media (max-width: 1050px) {/*1.position*/
    #hmbn {
        width:400px;
        background-color:red;        
    }
}

@media (max-width: 650px) {/*2.position*/
    #hmbn {
        width:40px;
        background-color:orange;        
    }
}
@media (max-width: 480px) {/*2.position*/
    #hmbn {
        width:10px;
        background-color:green;
    }
}

因为计算机正在从上到下读取它并覆盖样式

这将不起作用： 演示

@media (max-width: 480px) {/*1.position*/
    #hmbn {
        width:10px;
        background-color:green;
    }
}

@media (max-width: 650px) {/*2.position*/
    #hmbn {
        width:40px;
        background-color:orange;        
    }
}
@media (max-width: 1050px) {/*3.position*/
    #hmbn {
        width:400px;
        background-color:red;        
    }
}

Answer 3

给你

@media screen and (max-width:1050px) {
    #hmbn {
        width:400px;
        background-color:red;
    }
    .im1fill {
        float:none;
    }
}

说明： #hmbn没有收到我的高度，将其通过引起a不显示为块，这是由锚内的div的浮动引起的。 拆下浮子，然后固定好一切。 您也可以摆脱!important标签。