Bootstrap栅格系统：如何让下一列换行显示

你不需要用空div填充剩余列数，Bootstrap有更简洁的方式实现强制换行，以下是两种可行方案：

方案1：使用w-100实现响应式换行（推荐） #

在需要换行的位置添加w-100类的div，它会在flex容器（row）中占据整行宽度，强制后续元素换行。如果只需要在特定断点（比如md及以上）换行，可以搭配响应式显示类（如d-md-block d-none），避免小屏幕不必要的换行。

修改后的代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<form action="" class="row">
  <!-- email control -->
  <div class="mb-3 col-md-3">
    <label for="email" class="form-label">Email Address:</label>
    <input type="email" name="email" id="email" class="form-control" aria-describedby="emailHelp">
    <div class="form-text" id="emailHelp">We'll never share your email with anyone.</div>
  </div>
  <!-- 替换空div为w-100实现换行 -->
  <div class="w-100 d-md-block d-none"></div>
  <!-- password control -->
  <div class="mb-3 col-md-3">
    <label for="password" class="form-label">Password:</label>
    <input type="password" name="password" id="password" class="form-control">
  </div>
  <!-- check control -->
  <div class="mb-3 form-check col"> <!-- 修正mb3为mb-3 -->
    <input type="checkbox" name="" id="checkMe" class="form-check-input">
    <label for="checkMe" class="form-label">Check me out</label>
  </div>

  <div class="col">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>

</form>

方案2：将独立行内容包裹在row中 #

如果需要更清晰的结构，可以把每一行的内容单独放在一个row容器里，这样天然实现换行，无需额外处理：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<form action="">
  <!-- email行 -->
  <div class="row">
    <div class="mb-3 col-md-3">
      <label for="email" class="form-label">Email Address:</label>
      <input type="email" name="email" id="email" class="form-control" aria-describedby="emailHelp">
      <div class="form-text" id="emailHelp">We'll never share your email with anyone.</div>
    </div>
  </div>
  <!-- password行 -->
  <div class="row">
    <div class="mb-3 col-md-3">
      <label for="password" class="form-label">Password:</label>
      <input type="password" name="password" id="password" class="form-control">
    </div>
    <!-- check control -->
    <div class="mb-3 form-check col">
      <input type="checkbox" name="" id="checkMe" class="form-check-input">
      <label for="checkMe" class="form-label">Check me out</label>
    </div>
  </div>
  <!-- 按钮行 -->
  <div class="row">
    <div class="col">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

说明：

• 方案1更适合需要在同一row中根据断点控制换行的场景，保持结构紧凑。
• 方案2结构更清晰，适合内容逻辑上分为独立行的情况。
• 注意修正了你代码中的mb3拼写错误，应该是mb-3（Bootstrap的间距类需要带连字符）。

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