我想在容器流体上增加一些余量，但是当我这样做时，我得到了horizontall滚动条并且网格被打破了。如何在没有其他副作用的情况下做到这一点？
<div class="container-fluid">
<div class="row">
<div class="col-md-3 d-flex align-items-center justify-content-center">
<mat-form-field class="choose-appointment-date" appearance="fill">
<mat-label>Choose an appointment date</mat-label>
<input matInput [matDatepicker]="picker" [min]="minDate" (dateChange)="getSelectedDate($event)"
class="form-control" [formControl]="appointment_date" disabled>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker touchUi #picker disabled="false"></mat-datepicker>
</mat-form-field>
</div>
<div class="col-md-9" *ngIf='availavable_appointment_hours_test'>
<h3 *ngIf='availavable_appointment_hours_test.length'>Availavable termins for: {{ selected_appointment_date }}
</h3>
<h3 *ngIf='!availavable_appointment_hours_test.length' class='red'>There are not availvable dates for:
{{ selected_appointment_date }}</h3>
<div class="row">
<div class="card col-lg-2 make-appointment-card" *ngFor="let hour of availavable_appointment_hours_test">
<div class="card-body" (click)="selectAppointmentHour(hour)">
<div class='text-center'>{{ hour.value }} </div>
</div>
</div>
</div>
</div>
</div>
</div>
.container-fluid {
margin: 50px !important;
}
将.container-fluid其设置为100%宽度（与窗口的宽度相同），并在其中添加固定的边距px（不响应），因此您的页面始终比窗口宽100px。
您需要为左和右使用响应边距，并设置较小的响应宽度。
请尝试以下示例之一：
.container-fluid {
margin: 50px 10% !important;
width: 80%;
}
.container-fluid {
margin: 50px auto !important;
width: 92%;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句