Bootstrap响应式布局需求：桌面4列/小笔记本3列/平板2列/移动端1列

你的代码存在两个核心问题：

1. Bootstrap 5已移除col-xs-*类，需改用col-*表示超小屏幕（<576px）布局
2. 断点匹配错误，且手动拆分row会导致中等屏幕下布局错位（每行3列时，原4个一组的结构会出现单行3个+1个换行的问题）

修正后的代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title> پویان افتخاری - بوت استرپ</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />
  <style>
    /* 可选：给列加样式方便查看布局 */
    [class^="col-"] {
      border: 1px solid #ddd;
      padding: 1rem;
      background-color: #f8f9fa;
    }
  </style>
</head>
<body>
  <div class="row g-3"> <!-- g-3设置列间距，可按需调整 -->
    <div class="col-lg-3 col-md-4 col-sm-6 col-12">box 1</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-12">box 2</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-12">box 3</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-12">box 4</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-12">box 5</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-12">box 6</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-12">box 7</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-12">box 8</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-12">box 9</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-12">box 10</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-12">box 11</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-12">box 12</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-12">box 13</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-12">box 14</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-12">box 15</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-12">box 16</div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>

类名对应场景说明 #

• col-lg-3：大屏幕（≥992px，桌面）每行4列（12栅格系统中，12/3=4）
• col-md-4：中等屏幕（≥768px，小笔记本）每行3列（12/4=3）
• col-sm-6：小屏幕（≥576px，平板）每行2列（12/6=2）
• col-12：超小屏幕（<576px，移动端）每行1列

额外说明 #

• 所有列放在同一个row中即可，Bootstrap栅格系统会自动根据屏幕宽度换行，无需手动拆分多个row
• g-3类用于设置列之间的间距，可根据需求调整为g-2、g-4等
• 自定义样式仅用于直观展示布局效果，实际项目中可按需移除

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