Bootstrap动态col调整大小

Question

所以我想要实现的是。首次加载页面时，我希望显示该页面：

col-md-6 | col-md-3 | COL-MD-3

但是当窗口调整大小时（或在较小的屏幕设备上查看时），我想要

col-md-4 | col-md-4 | COL-MD-4

有没有办法使用没有CSS hackery的Bootstrap来做到这一点？

Answer 1

我认为你需要这样的东西。

<div class="row">
  <div class="col-md-6 col-sm-4"></div>
  <div class="col-md-3 col-sm-4"></div>
  <div class="col-md-3 col-sm-4"></div>
</div>

这样做，对于大中型屏幕，大小将是6/12,3 / 12和3/12的比例。

对于较小的屏幕，div将占用可用宽度的4 / 12,4 / 12,4 / 12。