當匹配col-md時顯示div，但匹配時不顯示它col-sm

Question

我想在某個屏幕尺寸匹配時顯示特定圖像。在這種情況下，我使用col-xx - ##作爲我的選擇。但看起來它並不像我認爲的那樣真正工作。

基本想法是，我想展示一種全屏圖像，同時如果屏幕尺寸變小，則顯示另一個圖像。

<div class="row"> 
    <img class="col-md-0 col-xs-12" src="img900x525.png"> 
    <img class="col-md-12 col-xs-0" src="img300x300.png"> 
</div> 

謝謝

Answer 1

開始時用較小的圖像可見：

.col-xs-0 { 
    display: inline; 
} 

.col-xs-12 { 
    display: none; 
} 

然後，在更大屏幕上，顯示而不是更大的版本：

@media only screen and (min-width:70em) { 
    .col-xs-0 { 
    display: none; 
    } 

    .col-xs-12 { 
    display: inline; 
    } 
} 

（調整最小寬度以適合您的需求）

Answer 2

Bootstrap支持使用隱藏類，但您需要隱藏所有不希望圖像顯示的視口。

<div class="row"> 
    <img class="col-xs-12 hidden-md " src="img900x525.png"> 
    <img class="hidden-xs col-md-12 " src="img300x300.png"> 
</div>