Bootstrap无法新建行求助：新行未生成反而新增列

嘿，我猜你大概率是在用Bootstrap栅格系统吧？这种“想换行却变成新列”的坑我踩过好多次啦～ 核心问题出在栅格布局的层级结构上，咱们一步步来理清楚：

问题根源 #

Bootstrap的栅格是严格遵循「container → row → col」的层级关系的：

• container 是用来居中内容、限制最大宽度的容器
• row 是用来包裹列的行容器，它会自动处理列的换行逻辑（默认每一行的列总宽度为12）
• col-* 是具体的列元素，必须放在row里面

如果你只是新增了container但没在里面加row，或者把新列直接塞到了上一个row里，就会导致列挤在同一行，而不是新起一行。

错误示例（你可能现在的代码结构） #

<!-- 第一行的结构 -->
<div class="container">
  <div class="row">
    <div class="col-md-6">第一列</div>
    <div class="col-md-6">第二列</div>
    <!-- 错误：直接在同一个row里加新列，会挤在同一行 -->
    <div class="col-md-12">想变成新行的内容</div>
  </div>
</div>

<!-- 错误：新增了container但没加row，列还是会和之前的内容在同一行排列 -->
<div class="container">
  <div class="col-md-12">想变成新行的内容</div>
</div>

正确的解决方案 #

要新建一行，你只需要新增一个row容器（不管是在同一个container里还是新的container里都可以）：

方案1：同一个container里新增行 #

<div class="container">
  <!-- 第一行 -->
  <div class="row">
    <div class="col-md-6">第一列</div>
    <div class="col-md-6">第二列</div>
  </div>
  <!-- 新的一行：用新的row包裹列，自动换行 -->
  <div class="row">
    <div class="col-md-12">这是全新的一行啦</div>
  </div>
</div>

方案2：用新的container包裹新行 #

<!-- 第一行 -->
<div class="container">
  <div class="row">
    <div class="col-md-6">第一列</div>
    <div class="col-md-6">第二列</div>
  </div>
</div>

<!-- 新的一行：新container + 新row -->
<div class="container">
  <div class="row">
    <div class="col-md-12">这是全新的一行啦</div>
  </div>
</div>

额外提示 #

如果你的布局不是用Bootstrap，而是自定义的CSS布局（比如用了float: left或display: inline-block），那你需要给新行的元素添加clear: both样式来强制换行，比如：

.new-row {
  clear: both;
}

不过根据你提到的container和列的描述，90%以上概率是Bootstrap栅格的层级问题，按照上面的方法调整结构应该就能解决啦～

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