Bootstrap 4三列等宽布局：修改堆叠断点为991px

在Bootstrap 4中，栅格系统的断点命名和触发逻辑和Bootstrap 3有区别，我们可以通过调整列的类名并替换依赖资源来实现你要的效果。

核心原理说明 #

Bootstrap 4的栅格断点定义如下：

• xs：屏幕宽度 < 576px
• sm：屏幕宽度 ≥ 576px
• md：屏幕宽度 ≥ 768px
• lg：屏幕宽度 ≥ 992px
• xl：屏幕宽度 ≥ 1200px

你需要的是屏幕宽度小于991px（即<992px）时列自动堆叠，这意味着只有当屏幕宽度≥992px时，三列才会并排显示。对应的栅格类就是col-lg-4——这个类表示在lg及以上断点（≥992px）时，每列占据12栅格中的4份（实现三列等宽），而在lg以下的所有断点（<992px），列会自动切换为垂直堆叠排列。

同时，你需要把原代码中Bootstrap 3的依赖替换为Bootstrap 4的资源。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 替换为Bootstrap 4的CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <!-- Bootstrap 4依赖的jQuery和Popper.js -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <!-- Bootstrap 4的JS文件 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 992px wide (equivalent to <991px).</p>
  <div class="row">
    <!-- 将原Bootstrap 3的col-sm-4替换为col-lg-4 -->
    <div class="col-lg-4" style="background-color:lavender;">.col-lg-4</div>
    <div class="col-lg-4" style="background-color:lavenderblush;">.col-lg-4</div>
    <div class="col-lg-4" style="background-color:lavender;">.col-lg-4</div>
  </div>
</div>

</body>
</html>

关键修改点 #

1. 资源替换：把Bootstrap 3的CSS和JS换成Bootstrap 4版本，注意Bootstrap 4需要Popper.js来支持弹窗、下拉菜单等交互组件（如果你的页面不需要这些功能，也可以省略Popper.js，但建议保留以保证框架功能完整性）。
2. 类名调整：将列的类从col-sm-4改为col-lg-4，直接实现了在屏幕宽度小于992px时自动堆叠的需求。

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