Bootstrap网格未按预期工作：每行三列却垂直堆叠

嘿，我一眼就看出你代码里的问题啦——Bootstrap的网格系统有个严格的层级要求：列（.col-*）必须直接放在行（.row）里面，如果要嵌套列，父列里也得先加个新的.row才行，不然列就会因为没有正确的布局上下文，乖乖垂直堆叠起来。

先看看你原代码里的结构问题：

<footer> 
  <div class="container-fluid bg-gray p-a-1 c-darkblue m-t-2"> 
    <div class="row"> 
      <div class="col-md-9"> 
        <div class="col-md-12"> <!-- 错误：col-md-12的父元素是col-md-9，没有.row -->
          <div class="col-md-4"> <!-- 错误：col-md-4的父元素是col-md-12，也没有.row -->
            <div *ngFor="let item of helpData; let ndx=index"...

修正后的代码示例 #

我帮你调整了结构，保证每个列都有正确的.row父容器：

<footer> 
  <div class="container-fluid bg-gray p-a-1 c-darkblue m-t-2"> 
    <div class="row"> 
      <!-- 占9份的主列 -->
      <div class="col-md-9"> 
        <!-- 必须在这里加一个嵌套的.row，用来放内部的子列 -->
        <div class="row"> 
          <!-- 直接循环生成col-md-4，它们会自动水平排列 -->
          <div class="col-md-4" *ngFor="let item of helpData; let ndx=index">
            <!-- 这里放你的item内容 -->
          </div>
        </div>
      </div>
      <!-- 这里可以加剩下的3份列，比如col-md-3，按需添加 -->
    </div>
  </div>
</footer>

额外注意事项 #

• 如果你希望在小屏幕（比如手机）上也保持三列水平排列，可以把col-md-4换成col-sm-4（Bootstrap 3）或者col-4（Bootstrap 4及以上）。
• 检查一下你有没有正确引入Bootstrap的CSS文件，避免自定义样式覆盖了Bootstrap的网格布局（比如不小心给.col-*加了display:block或者float:none）。

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