css - Bootstrap 3，如何防止 col-md-# 堆叠？

Question

我知道我可以使用 col-xs-# 来防止列堆叠，但是当一切都使用 col-md-# 时我继承了一个站点。当浏览器全屏显示时，该站点看起来不错，但是当您将其调整为屏幕的 50% 左右时，即使仍然有很多屏幕空间，列也会堆叠起来。我如何重新定义 col-md-# 类使其不堆叠，这样我就不必查找并用 col-xs-# 替换所有类？

全屏

浏览器宽度 1100px

Answer 1

您可以在下载 Bootstrap 之前以您想要的方式对其进行自定义。

对于版本 3，请查看此页面 https://getbootstrap.com/docs/3.4/customize/#media-queries-breakpoints

@screen-md参数的默认值为992px。在此视口(viewport)宽度之上，列 (.col-md-*) 将并排呈现。虽然我认为这不是最佳做法，但您只需将此值降低到768 像素以上(上一个断点)。

重要!不要将此值降低到小于 768 像素，否则您最终会遇到严重的网格问题。

我强烈建议您为您的元素查找并替换所有 col-md- 至少为 col-sm。