2017-03-17 24 views
1

我試圖應用一些只針對XS屏幕的CSS,但它也適用於中等屏幕。引導網格樣式用於額外的小也適用於中等屏幕

enter image description here

見.COL-XS明確的風格,但我在全屏模式查看它在桌面上,它呈現XS特定的風格。

我在這裏做錯了什麼或缺少bootstrap的任何代碼?

感謝,

+3

您的選擇會根據他們是否有類'COL-XS-12'元素 - 和你的元素確實有這個類,在任何*視*寬。如果您希望它們只能在特定的屏幕尺寸上工作,您當然需要將您的選擇器包裝在適當的媒體查詢中。 – CBroe

+0

嗯...所以我們不能指定樣式只形成在col-xs-12內部的元素..我認爲當我們使用引導時我們可以避免使用媒體查詢... –

+2

_「所以我們不能指定樣式只包含在col-xs-12內部的元素「_ ​​ - 不,因爲你的元素_always_有這個類。該類不會在某個屏幕寬度上奇蹟般消失。這些元素在不同的屏幕尺寸下有不同的表現,這是因爲Bootstrap本身使用媒體查詢來在不同的屏幕尺寸下使用這些類別對元素進行格式化。這樣就可以「自動」處理具有「col-xs-12」類的元素本身。 [...] – CBroe

回答

3

上的元素的CSS類總是應用,除非有媒體查詢。

Bootstrap specific media queries這將是如此..

@media (max-width: 768px) { 

    .prop-image { 
     margin-right: auto; 
     margin-left: auto; 
    } 

} 
-1

你在引導使用列,現在的方式是說,在MD寬跨度4列,並在XS寬度橫跨整個頁面。它沒有任何內容隱藏。

如果你想要一個簡單的方法來隱藏和只顯示在XS內容屏幕的寬度,你需要媒體查詢,或另一種選擇是使用內置的響應實用類

。可見-XS-*白手起家。

這將只顯示在xs的包含元素。

http://getbootstrap.com/css/#responsive-utilities-classes

相關問題