Question

我不确定为什么，但是<div class="row no-gutters并未删除空白。

网格中的按钮之间有很大的空间。我删除了每个id和class，以确保没有任何内容与页边距或填充物混淆，但问题仍然存在。有什么想法吗？

<div class="row no-gutters">

  <div class="col-md-4">
    <div [@simpleFadeAnimation]="'in'">
      <button mat-raised-button (click)="auctionEndingSoonestFilter()"
        [ngClass]="[this.auctionEndingSoonestStatus ? 'enabled' : 'disabled']" *ngIf="!isLoading && this.posts.length >0">
        <mat-icon>access_time</mat-icon>&nbsp;Auctions Ending Soonest
      </button>
    </div>
  </div>
  <div class="col-md-4">
    <div [@simpleFadeAnimation]="'in'">
      <button  mat-raised-button (click)="buyItNowFilter()"
        [ngClass]="[this.buyItNowStatus ? 'enabled' : 'disabled']" *ngIf="!isLoading && this.posts.length >0">
        <mat-icon>attach_money</mat-icon>Buy It Now Only
      </button>
    </div>
  </div>
  <div class="col-md-4">
      <div [@simpleFadeAnimation]="'in'">
        <button mat-raised-button (click)="buyItNowFilter()"
          [ngClass]="[this.buyItNowStatus ? 'enabled' : 'disabled']" *ngIf="!isLoading && this.posts.length >0">
          <mat-icon>remove_red_eye</mat-icon>Private Auctions Only
        </button>
      </div>
    </div>

</div>

Answer 1

引导网格基于flexbox，因此它将行宽除以其列数。

no-gutters删除行的边距和列的边距，并且不会影响列的宽度。

尝试使用col-md-auto代替列。

行无槽不消除间距

1 个答案: