html - Bootstrap 4 使用 Bootstrap 根据设备大小对元素的位置应用响应

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

对于以后遇到此问题的任何人。这是实现循环功能所需的两个数组。 (是的，适用于 BS-4 和 BS-5 )

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$positions: (
  static   : static,
  absolute : absolute,
  relative : relative,
  fixed    : fixed,
  sticky   : sticky,
);

不，不幸的是，没有用于应用和删除位置的原始引导媒体类。需要自己的规则来覆盖原来的 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;
  }
}