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-div div
• 小型（和超小型）设备上的12-div 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大小。如果设备高达992px（也就是说，如果它是中型设备或更多），那么它将覆盖大小，并使用10-col布局。

.col-md-offset-1用于将图像居中，仅适用于中型/大型设备

Bootply