Bootstrap @media查询不起作用

我在我的项目中使用Bootstrap并试图使iframe在移动设备上查看时调整大小。问题在于它将@media（max-width：600px）中的属性应用于站点的桌面版本，并且它显示为压扁状态。宽度工作得很好，但高度自动属性不能很好地显示在桌面屏幕上。Bootstrap @media查询不起作用

HTML：

<iframe src="./bootstrap-remake_files/9m056zu9yr.html" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" webkitallowfullscreen="webkitallowfullscreen" oallowfullscreen="oallowfullscreen" msallowfullscreen="msallowfullscreen" style="width: 768px; height: 432px;" width="768" height="432" mytubeid="mytube1"></iframe>

CSS：

@media (max-width:600px){ 
    iframe{ 
    width:100%; 
    height:auto; 
    } 
}

换句话说，我希望我的iframe有

 width:100%; 
    height:auto;

只能在移动时。

来源

2014-11-05 Dimoff

关闭'}'缺失？ – 2014-11-05 16:47:09

它在实际的代码中。粘贴时我错过了它。 – Dimoff 2014-11-05 16:48:10

您的style="width: 100%; height: auto;"覆盖了通过CSS应用于您的iframe的任何样式，除非属性标记为!important。

来源

2014-11-05 16:45:02

内联样式不存在了。仍然不起作用 – Dimoff 2014-11-05 16:46:17

您的意思是说媒体查询中的规则仍然没有应用，或者规则没有做到你想要的？因为删除内联样式适合我。 – 2014-11-05 16:57:09

Bootstrap @media查询不起作用

回答

相关问题