Bootstrap 4断点修改无效：平板横屏卡片布局不符合预期

你遇到的问题核心是变量覆盖的顺序错误——你先导入了Bootstrap的SCSS，之后才定义自定义的断点变量，这时候Bootstrap已经用默认的断点值完成编译了，你的自定义变量根本没起作用。

正确的SCSS编写顺序 #

Bootstrap的SCSS是基于变量驱动的，必须先定义自定义变量，再导入Bootstrap的核心SCSS文件，这样编译时才会使用你的自定义值替换默认值。

修正后的代码如下：

// 先定义自定义断点和容器宽度变量
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1025px,
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 993px,
  xl: 1140px
);

// 再导入Bootstrap核心SCSS
@import "../scripts/bootstrap-4.1.1/scss/bootstrap";

为什么这样修改后会生效？ #

当屏幕宽度为1024px时，它小于你设置的lg断点（1025px），所以会自动匹配下一个更小的断点md（768px及以上），你的卡片使用了col-md-6类，这意味着在md及以上（但小于lg）的屏幕上，每个卡片占6列（12列布局下就是2列一行），4个卡片正好会排列成2行2列，完全符合你的需求。

额外检查点 #

• 确保你的SCSS编译工具（比如Webpack、Gulp或者直接用Sass命令）正确处理了这个文件，生成了最新的CSS。
• 清除浏览器缓存（按Ctrl+F5强制刷新），避免加载旧的CSS文件导致修改不显示。

内容的提问来源于stack exchange，提问作者Elcid_91