覆蓋bootstrap hidden-xs媒體查詢

Question

我使用真正有用的引導程序hidden-xs，visible-xs等等來使問題成爲響應式頁面。

我的一位客戶將此頁面嵌入到他的網站中，不幸的是，他只能支持700px的iframe寬度。

所以我的問題是，他得到在他的網站頁面的移動版本作爲啓動xs開始767px。

那麼我能做些什麼來改變這種行爲爲650px？

我在我的overwritting CSS方法如下，但沒有任何變化：

@media (max-width: 650px) { 
    .visible-xs { 
     display: block !important; 
    } 
    table.visible-xs { 
     display: table !important; 
    } 
    tr.visible-xs { 
     display: table-row !important; 
    } 
    th.visible-xs, 
    td.visible-xs { 
     display: table-cell !important; 
    } 
} 
@media (max-width: 650px) { 
    .visible-xs-block { 
     display: block !important; 
    } 
} 
@media (max-width: 650px) { 
    .visible-xs-inline { 
     display: inline !important; 
    } 
} 
@media (max-width: 650px) { 
    .visible-xs-inline-block { 
     display: inline-block !important; 
    } 
} 
@media (max-width: 650px) { 
    .hidden-xs { 
     display: none !important; 
    } 
} 

Answer 1

所以，我決定創建自己的額外XXS類該情況。對於遇到類似問題的所有人，請在此處添加需要的寬度的css：

.visible-xxs, 
.visible-xxs-block, 
.visible-xxs-inline, 
.visible-xxs-inline-block { 
    display: none !important; 
} 

@media (max-width: 600px) { 
    .visible-xxs { 
     display: block !important; 
    } 
    table.visible-xxs { 
     display: table !important; 
    } 
    tr.visible-xxs { 
     display: table-row !important; 
    } 
    th.visible-xxs, 
    td.visible-xxs { 
     display: table-cell !important; 
    } 
} 
@media (max-width: 600px) { 
    .visible-xxs-block { 
     display: block !important; 
    } 
} 
@media (max-width: 600px) { 
    .visible-xs-inline { 
     display: inline !important; 
    } 
} 
@media (max-width: 600px) { 
    .visible-xxs-inline-block { 
     display: inline-block !important; 
    } 
} 
@media (max-width: 600px) { 
    .visible-xs { 
     display: none !important; 
    } 
} 

@media (max-width: 601px) { 
    .hidden-xxs { 
     display: none !important; 
    } 
} 

@media (min-width: 601px) and (max-width: 766px) { 
    .visible-xs { 
     display: block !important; 
    } 
    table.visible-xs { 
     display: table !important; 
    } 
    tr.visible-xs { 
     display: table-row !important; 
    } 
    th.visible-xs, 
    td.visible-xs { 
     display: table-cell !important; 
    } 
} 
@media (min-width: 601px) and (max-width: 766px) { 
    .visible-xs-block { 
     display: block !important; 
    } 
} 
@media (min-width: 601px) and (max-width: 766px) { 
    .visible-xs-inline { 
     display: inline !important; 
    } 
} 
@media (min-width: 601px) and (max-width: 766px) { 
    .visible-xs-inline-block { 
     display: inline-block !important; 
    } 
}