Bootstrap代码问题：平板端响应式布局未按预期换行求助

首先咱们得回忆Bootstrap栅格系统的核心规则：所有列必须包裹在.row容器内，而且栅格是基于12列的布局体系，同时断点类要对应你想要生效的屏幕尺寸。你遇到的三个div在平板上没换行，大概率是以下几个常见问题之一：

1. 没有将列嵌套在.row中 #

Bootstrap的.row会作为核心布局容器（Bootstrap 3是清除浮动，Bootstrap 4+是flex容器）来管理列的排列逻辑。如果直接把.col-*的div放在.row外面，列会因为浮动或display属性的异常，导致无法正确触发换行逻辑。

错误示例：

<div class="container">
  <div class="col-md-6">第一个div</div>
  <div class="col-md-6">第二个div</div>
  <div class="col-md-12">第三个div</div>
</div>

正确写法：

<div class="container">
  <div class="row">
    <div class="col-md-6">第一个div</div>
    <div class="col-md-6">第二个div</div>
    <div class="col-md-12">第三个div</div>
  </div>
</div>

2. 错误使用了断点类 #

不同Bootstrap版本的断点对应不同的屏幕尺寸，选错断点会导致布局逻辑不符合预期：

• Bootstrap 3：col-sm-*对应平板（≥768px），col-xs-*针对超小屏（<768px）
• Bootstrap 4/5：col-md-*对应平板（≥768px），col-sm-*针对小屏手机（≥576px）

比如你如果在Bootstrap 4+里给前两个div用了col-6（无断点，所有屏幕都占6列），理论上第三个div应该换行，但如果没放在.row里就可能失效；要是你给.row加了自定义的flex-nowrap样式，也会强制所有列不换行。

3. 自定义样式覆盖了Bootstrap默认规则 #

检查一下你的自定义CSS，有没有不小心覆盖了栅格的核心样式：

• 给.row加了flex-nowrap，强制列不换行
• 给列元素加了float:left且没清除浮动
• 设置了white-space:nowrap这类强制不换行的属性

这些自定义样式都会破坏Bootstrap的原生布局逻辑。

4. 未正确引入Bootstrap CSS文件 #

如果页面没有正确引入Bootstrap的CSS，那所有栅格类都不会生效。比如div可能被你设置成了inline-block或浮动，自然会挤在同一行。确认head里有类似的引入代码：

<!-- Bootstrap 5 示例 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

快速验证方法 #

先写一个最简测试代码，看看是否能正常换行：

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6 bg-primary text-white p-3">第一个div</div>
      <div class="col-md-6 bg-secondary text-white p-3">第二个div</div>
      <div class="col-md-12 bg-success text-white p-3">第三个div</div>
    </div>
  </div>
</body>
</html>

把这个代码保存成html文件在平板上打开，如果第三个div正常换行，说明你的原代码存在上述某个问题；如果还是不换行，可能是你的平板屏幕宽度超过了md断点（比如1024px的大屏平板），这时候需要用col-lg-6来控制更大屏幕的布局。

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