当匹配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>