html - 列标题和行未使用 Bootstrap 对齐

Question

我正在尝试使用 Bootstrap 样式来显示网格样式。出于某种原因，我的列标题和正文没有对齐。有人可以告诉我可能是什么问题。我也尝试过应用样式。我基本上需要为第一个具有 class="col-md-12 类的 div 显示标题。然后我需要设置具有 class div class="row your-body"的 body div 的样式。目前你的 body 我们just dummy 没有定义样式。需​​要帮助。

<div class="grid-container container-fluid">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-1">
        CompanyName
      </div>
      <div class="col-md-1">
        ContactName
      </div>
      <div class="col-md-1">
        ContactTitle
      </div>
      <div class="col-md-1">
        Address
      </div>
      <div class="col-md-1">
        City
      </div>
      <div class="col-md-1">
        Region
      </div>
      <div class="col-md-1">
        PostalCode
      </div>
      <div class="col-md-1">
        Country
      </div>
      <div class="col-md-1">
        Phone
      </div>
      <div class="col-md-1">
        Fax
      </div>

    </div>
  </div>
  <div class="row your-body">
    <div class="col-md-12">
      <ng-template let-customer let-customerIdx="index" ngFor [ngForOf]="customers">
        <div class="col-md-1">
          <span>{{customer.CompanyName}}</span>
        </div>
        <div class="col-md-1">
          <span>{{customer.ContactName}}</span>
        </div>
        <div class="col-md-1">
          <span>{{customer.ContactTitle}}</span>
        </div>
        <div class="col-md-1">
          <span>{{customer.Address}}</span>
        </div>
        <div class="col-md-1">
          <span>{{customer.City}}</span>
        </div>
        <div class="col-md-1">
          <span>{{customer.Region}}</span>
        </div>
        <div class="col-md-1">
          <span>{{customer.PostalCode}}</span>
        </div>
        <div class="col-md-1">
          <span>{{customer.Country}}</span>
        </div>
        <div class="col-md-1">
          <span>{{customer.Phone}}</span>
        </div>
        <div class="col-md-1">
          <span>{{customer.Fax}}</span>
        </div>
      </ng-template>
    </div>
  </div>
</div>

样式.scss

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    background-color: #2196F3;
    padding: 10px;
  }

期待 UI 的样子

Answer 1

这是使用 Bootstrap 网格系统的布局代码的更“有效”版本:

<div class="outer-container container-fluid">
  <div class="col-md-12">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-1">
          CompanyName
        </div>
        <div class="col-md-1">
          ContactName
        </div>
        <div class="col-md-1">
          ContactTitle
        </div>
        <div class="col-md-1">
          Address
        </div>
        <div class="col-md-1">
          City
        </div>
        <div class="col-md-1">
          Region
        </div>
        <div class="col-md-1">
          PostalCode
        </div>
        <div class="col-md-1">
          Country
        </div>
        <div class="col-md-1">
          Phone
        </div>
        <div class="col-md-1">
          Fax
        </div>
    </div>

    <div class="row">
      <div class="col-md-1">
        <span>121</span>
      </div>
      <div class="col-md-1">
        <span>232</span>
      </div>
      <div class="col-md-1">
        <span>3434</span>
      </div>
      <div class="col-md-1">
        <span>343</span>
      </div>
      <div class="col-md-1">
        <span>3434</span>
      </div>
      <div class="col-md-1">
        <span>3434</span>
      </div>
      <div class="col-md-1">
        <span>3434</span>
      </div>
      <div class="col-md-1">
        <span>34343</span>
      </div>
      <div class="col-md-1">
        <span>454545</span>
      </div>
      <div class="col-md-1">
        <span>3434</span>
      </div>
    </div>
  </div>
</div>

https://stackblitz.com/edit/angular-cupnh1?file=src%2Fapp%2Fapp.component.html

^^ 用于使用更好的在线编辑器 IMO 运行示例