Bootstrap网格无法正常工作

Question

我正在尝试每行创建一个包含三列的网格，但这些列是按预期垂直堆叠而不是水平堆叠。 我试图创建一个每行三列的网格，但列垂直堆叠而不是按预期水平。

<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">
      <div class="col-md-4">
        <div *ngFor="let item of helpData; let ndx=index">
          <div *ngIf="ndx==0">
            <h5 class="c-black">{{item.header}}<br></h5>
          </div>
          <ul class="list-style-none font-bold f-1 line-ht-1pt5">
            <li class="m-ln-2pt3">{{item.menu}}<i class="fa fa-caret-right m-l-pt5"></i></li>
          </ul>
        </div>
      </div>

      <div class="col-md-4">
        <div *ngFor="let item of flyersData; let ndx=index">
          <div *ngIf="ndx==0">
            <h5 class="c-black">{{item.header}}<br></h5>
          </div>
          <ul class="list-style-none font-bold f-1 line-ht-1pt5">
            <li class="m-ln-2pt3">{{item.menu}}<i class="fa fa-caret-right m-l-pt5"></i></li>
          </ul>
        </div>
      </div>

      <div class="col-md-4">
        <div *ngFor="let item of flyersData; let ndx=index">
          <div *ngIf="ndx==0">
            <h5 class="c-black">{{item.header}}<br></h5>
          </div>
          <ul class="list-style-none font-bold f-1 line-ht-1pt5">
            <li class="m-ln-2pt3">{{item.menu}}<i class="fa fa-caret-right m-l-pt5"></i></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-3 c-black">
  </div>
</div>