Bootstrap 5 边框颜色不适用于响应式边框开始/结束/顶部/底部答案

【问题标题】：Bootstrap 5 border-color doesn't work for responsive border-start/end/top/bottomBootstrap 5 边框颜色不适用于响应式边框开始/结束/顶部/底部
【发布时间】：2022-02-12 19:08:28
【问题描述】：

我想要达到的目标：

对于移动设备：仅边框顶部/底部，对于桌面：仅边框开始/结束，边框为深色。

我尝试过的：

在 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>

问题是桌面上的边框开始/结束出现在默认1px solid #dee2e6 !important引导颜色中

【问题讨论】：

标签： html css border bootstrap-5

【解决方案1】：

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

   @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

【讨论】：