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

Posted 2023-03-05

【中文标题】Bootstrap 4 根据使用引导的设备大小对元素的位置应用响应

【英文标题】：Bootstrap 4 applying responsiveness to position on elements depending on device size with bootstrap

【发布时间】：2020-10-21 20:16:36

【问题描述】：

我使用 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。有什么建议吗？

【参考方案1】：

根据@Max Kaps 的回答，我用 BS5 进行了测试，它运行良好。

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

【参考方案2】：

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

https://getbootstrap.com/

在这里启用这个功能是 SCSS 的代码 sn-p：

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

【讨论】：

这很快！谢谢你的帮助！

您能提供 Bootstrap5 的解决方案吗？我目前无法正确处理

我们现在正在将几个项目迁移到 B5。我很快就会提出解决方案

试试你的 Sass，我得到了 SassError: Undefined variable: "$positions"，我在任何地方都找不到位置变量，但我用 .position#$infix-fixed position: fixed !important; 对其进行临时硬编码...