html - Bootstrap 从一个网格大小列更改为另一个

Question

使用 Bootstrap 我有这个

<div class="col-sm-4">
  <p>something</p>
</div>

但当视口(viewport)宽度小于 1200 像素时，我希望它是“col-sm-6”。

有没有办法不用任何脚本，只用 css 就可以用类“col-sm-6”替换类“col-sm-4”？

此外，我宁愿不为此修改 Bootstrap 中的所有变量，只是为了代码尽可能清晰和简短。

抱歉马铃薯英语，感谢您的帮助!

Answer 1

你不能只用 css 改变类，但你有两个选择:1)媒体查询:

@media only screen and (max-width: 1200px) {
  //your css here
}

2) bootstrap col 大小类，每个类反射(reflect)不同的屏幕宽度:

<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
  <p>something</p>
</div>

你可以在这里找到更多关于它的信息Bootstrap Grid