html - 行无排水沟不删除间距

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

Bootstrap 网格基于 flexbox，因此它根据列数划分行宽。

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

尝试对列使用 col-md-auto。