Bootstrap动态col调整大小[重复]

Posted 2023-03-06

【中文标题】Bootstrap动态col调整大小[重复]

【英文标题】：Bootstrap dynamic col resize [duplicate]

【发布时间】：2018-02-16 12:14:16

【问题描述】：

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

col-md-6 | col-md-3 | col-md-3

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

col-md-4 | col-md-4 | col-md-4

有没有办法在没有 CSS 黑客的情况下使用 Bootstrap 来做到这一点？

【问题讨论】：

当 bootstrap 提供 col-sm 和 col-xs 以及所有这些时，为什么你需要使用 jquery 来做到这一点？？

请提供html代码

阅读Bootstrap docs

【参考方案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。