使用Bootstrap 4网格布局时列垂直堆叠而非水平排列的问题求助

嘿，我找到你Bootstrap网格布局出问题的原因啦！你的列会垂直堆叠，主要是结构嵌套错误和未正确拆分行容器导致的，我给你整理了修复方案：

修复后的完整代码 #

CSS 部分 #

.card { 
  height: 600px; 
  width: 800px; 
  background-color: darkseagreen; 
  padding: 20px; 
}
.box1 { background-color: floralwhite; }
.box2 { background-color: rgb(238, 185, 80); }
.box3 { background-color: indianred; }
.box4 { background-color: rgb(137, 137, 235); }
.box5 { background-color: rosybrown; }
.box6 { background-color: sienna; }
/* 新增：给每个box加内边距和最小高度，让布局更直观 */
.box {
  padding: 1rem;
  min-height: 150px;
}

HTML 部分 #

<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- Body -->
<div class="container">
  <div class="card mx-auto">
    <!-- 第一行：三个col-4，刚好占满12列网格 -->
    <div class="row mb-3"> <!-- mb-3是Bootstrap内置间距类，给行之间添加空隙 -->
      <div class="col-4 box box1">BOX1</div>
      <div class="col-4 box box2">BOX2</div>
      <div class="col-4 box box3">BOX3</div>
    </div>
    <!-- 第二行：三个col自动平分12列宽度 -->
    <div class="row">
      <div class="col box box4">BOX4</div>
      <div class="col box box5">BOX5</div>
      <div class="col box box6">BOX6</div>
    </div>
  </div>
</div>

问题根源与修复说明 #

我帮你拆解了两个核心问题：

• 错误的容器嵌套：你把.card和.row合并成了一个元素（<div class="row card mx-auto">），但Bootstrap的.row自带负margin，和.card的padding会产生布局冲突，导致列的排列逻辑混乱。正确的结构应该是.card作为外层容器，内部嵌套.row。
• 未拆分行容器：所有6个列都放在了同一个.row里，虽然第一行的3个.col-4刚好占满12列，但后续的列会因为总宽度超过12列被强制换行，再加上之前的样式冲突，就出现了垂直堆叠的问题。我们需要把前3个列和后3个列分别放到独立的.row中，让每行的列都能正确水平排列。

这样修改后，你就能实现两行三列的网格布局，列会正常水平排列啦！

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