仅在大屏幕上添加边距

Question

我正在使用 angular 9 开发应用程序。在我看来，我添加了 magin 以减小表单的大小

<div class="row">
  <div class="col-12 mb-4" *ngIf="!displayListCompanies; else companiesList">
    <div class="card" style="min-height: 579px; margin-right: 200px; margin-left: 200px">
      <div class="card-body justify-content-between align-items-center">
        <div class=" company-welcome-logo">

        </div>
        <p class=" text-justify text-center font-weight-bold font-size-xlarge"><b>{{'company.welcome-abord' | translate}} {{ displayName }} !</b></p>
        <p class=" text-justify text-center">{{'company.welcome-text1' | translate}} <br/> {{'company.welcome-text2' | translate}} </p>

        <button class="btn btn-primary btn-lg btn-shadow align-items-center align-content" (click)="createCompany()">
          {{ "company.create" | translate }}
        </button>

      </div>
    </div>

  </div>

  <ng-template #companiesList>
    Another magic element!
  </ng-template>
</div>
<simple-notifications></simple-notifications>

在中等屏幕上我想保留边距，但在小设备上将其删除。

我尝试使用 bootstrap 来实现这个但没有成功我怎么能这样做？提前致谢。

Answer 1

使用CSS 媒体查询。仅将额外的边距放在 min-width: XXXX 部分。

像这样...

<style>

@media only screen and (min-width: 1000px) {
  /* For large screens: */
  .card {margin-right: 200px; margin-left: 200px}
}

</style>

虽然您可能想给卡一个 ID，这样如果您有多个 class 卡的 div，它只会应用于您需要的那个。然后在媒体查询中，您将拥有#formcard 或其他任何内容，而不是.card。

仅在大屏幕上添加边距

Adding margin on only large screen

css

angular-ui-bootstrap

bootstrap-4