Question

我正在尝试使用引导程序样式来显示网格样式。由于某种原因，我的列标题和正文未对齐。有人可以告诉我问题可能出在哪里。我也尝试过应用样式。我需要基本显示第一个具有class class =“ col-md-12的div的Header。然后我需要设置具有div class =” row your-body“的body div的样式。只是哑人没有定义样式。需要帮助。

<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>

style.scss

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

保护用户界面外观

Answer 1

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

<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

列标题和行未使用引导程序对齐

1 个答案: