如何在不破坏响应性的情况下在容器流体上添加边距答案

【问题标题】：How can i add margin on container-fluid without breaking the responsivness如何在不破坏响应性的情况下在容器流体上添加边距
【发布时间】：2021-02-01 13:45:50
【问题描述】：

我想在容器流体上添加一些边距，但是当我这样做时，我得到了水平滚动条和网格坏了。我怎样才能做到这一点而没有其他副作用？

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

【问题讨论】：

标签： angular twitter-bootstrap bootstrap-4

【解决方案1】：

.container-fluid 设置为100% 宽度（响应式宽度与窗口相同），并且您在px 中添加固定边距（不响应式），因此您的页面始终比窗口宽 100 像素。

您需要使用左右响应边距，并设置较小的响应宽度。
尝试以下示例之一：

.container-fluid {
  margin: 50px 10% !important;
  width: 80%;
}

.container-fluid {
  margin: 50px auto !important;
  width: 92%;
}

【讨论】：