Bootstrap 4 使用引导程序根据设备大小应用响应来定位元素

Question

我使用 bootstrap4 创建一个移动优先的响应式布局，其中包含具有不同位置的元素，并设置了各种行和列，我可以针对不同类别的屏幕尺寸进行调整。

我想知道是否有纯引导样式类可以让我应用和删除不同大小的位置（绝对、固定、相对），而不必创建我自己的 css 媒体查询。

例如，如果我想让一个容器在移动设备上变得固定而在桌面上只在中等大小的屏幕上变得绝对......

<div id="back-to-top" class="position-fixed position-sm-absolute position-md-relative">
    <a href="#">
        <i class="fa fa-chevron-up"></i>
    </a>
</div>

我也在使用带有 css 的 wordpress，因此无法轻松进入 sass。有什么建议？

Answer 1

不，不幸的是没有用于应用和删除位置的原始引导媒体类。需要自己的规则来覆盖原始的 Bootstrap 4 类位置定义。同样的问题在这里。

https://getbootstrap.com/

在此处启用此功能是 SCSS 的代码片段：

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    // Common values
    @each $position in $positions {
      .position#{$infix}-#{$position} { position: $position !important; }
    }
  }
}

和 CSS 的编译版本：

@media (min-width: 576px) {
  .position-sm-static {
    position: static !important;
  }
  .position-sm-relative {
    position: relative !important;
  }
  .position-sm-absolute {
    position: absolute !important;
  }
  .position-sm-fixed {
    position: fixed !important;
  }
  .position-sm-sticky {
    position: sticky !important;
  }
}

@media (min-width: 768px) {
  .position-md-static {
    position: static !important;
  }
  .position-md-relative {
    position: relative !important;
  }
  .position-md-absolute {
    position: absolute !important;
  }
  .position-md-fixed {
    position: fixed !important;
  }
  .position-md-sticky {
    position: sticky !important;
  }
}

@media (min-width: 992px) {
  .position-lg-static {
    position: static !important;
  }
  .position-lg-relative {
    position: relative !important;
  }
  .position-lg-absolute {
    position: absolute !important;
  }
  .position-lg-fixed {
    position: fixed !important;
  }
  .position-lg-sticky {
    position: sticky !important;
  }
}

@media (min-width: 1200px) {
  .position-xl-static {
    position: static !important;
  }
  .position-xl-relative {
    position: relative !important;
  }
  .position-xl-absolute {
    position: absolute !important;
  }
  .position-xl-fixed {
    position: fixed !important;
  }
  .position-xl-sticky {
    position: sticky !important;
  }
}