Bootstrap網格系統：切換類名稱？

Question

我只使用col col-md-10爲一個元素，並希望切換到col col-md-12在一個較小的屏幕上，我怎麼能用bootstrap做到這一點？

上的負載，

<div class="col col-md-10"> 
    <img src="xxx.jpg" class="img-responsive"/> 
</div> 

這樣我就可以得到這個當我調整瀏覽器更小，

<div class="col col-md-12"> 
    <img src="xxx.jpg" class="img-responsive"/> 
</div> 

這可能嗎？

Answer 1

所以，你想：

• 在介質（大型）設備10山坳格
• 上小（超小）設備12山坳DIV

由於Bootstrap 3首先是移動設備，請使用此代碼：

<div class="container"> 
    <div class="col col-xs-12 col-md-10 col-md-offset-1"> 
    <img src="xxx.jpg" class="img-responsive"> 
    </div> 
</div> 

我會先設置一個12-col尺寸。如果設備達到992像素（也就是說，如果它是中等設備或更多），那麼它將覆蓋大小，並使用10-col佈局。

.col-md-offset-1在這裏居中你的形象，只有在中型/大型設備

Bootply