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查詢不起作用

回答

相關問題