Bootstrap 5 边框颜色不适用于响应式 border-start/end/top/bottom

Question

我想达到的目标：

对于移动设备：只有边框 top/bottom，对于桌面：只有边框 start/end，边框颜色为深色。

我尝试过的：

向 main.scss

添加了自定义响应边框

// responsive borders

@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  
      .border#{$infix}-top {      border-top: $border-width solid $border-color !important; }
      .border#{$infix}-end {    border-right: $border-width solid $border-color !important; }
      .border#{$infix}-bottom {   border-bottom: $border-width solid $border-color !important; }
      .border#{$infix}-start {     border-left: $border-width solid $border-color !important; }
  
      .border#{$infix}-top-0 {    border-top: 0 !important; }
      .border#{$infix}-end-0 {  border-right: 0 !important; }
      .border#{$infix}-bottom-0 { border-bottom: 0 !important; }
      .border#{$infix}-start-0 {   border-left: 0 !important; }
  
      .border#{$infix}-x {
        border-left: $border-width solid $border-color !important;
        border-right: $border-width solid $border-color !important;
      }
  
      .border#{$infix}-y {
        border-top: $border-width solid $border-color !important;
        border-bottom: $border-width solid $border-color !important;
      }
    }
  }

在html中：

<div class="col-sm-4 d-flex justify-content-center justify-content-sm-center border border-dark border-start-0 border-end-0 border-md-start border-md-end border-md-top-0 border-md-bottom-0 overflow-hidden"></div>

问题是桌面上的边框 start/end 默认显示 1px solid #dee2e6 !important bootstrap 颜色

Answer 1

我认为您需要专门设置 border-{side}-width 和 border-style 而不是 shorthand。否则 Bootstrap 的 .border: {1px solid #dee2e6 !important;} 使用的 shorthand 中的颜色将覆盖它。

   @include media-breakpoint-up($breakpoint) {    
      .border#{$infix}-top { border-top-width: $border-width !important; border-style: solid !important; }
      .border#{$infix}-end { border-right-width: $border-width !important; border-style: solid !important; }
      .border#{$infix}-bottom { border-bottom-width: $border-width !important; border-style: solid !important; }
      .border#{$infix}-start { border-left-width: $border-width !important; border-style: solid !important; }
      
      .border#{$infix}-top-0 { border-top-width: 0 !important; }
      .border#{$infix}-end-0 { border-right-width: 0 !important; }
      .border#{$infix}-bottom-0 { border-bottom-width: 0 !important; }
      .border#{$infix}-start-0 { border-left-width: 0 !important; }
   }

SASS demo

Bootstrap 5 边框颜色不适用于响应式 border-start/end/top/bottom

Bootstrap 5 border-color doesn't work for responsive border-start/end/top/bottom

html

css

border

bootstrap-5