Bootstrap 4 - 响应/包装按钮组

Question

前提条件

我想使用bootstrap提供的Button group。此外，按钮组应切换到特定屏幕尺寸的垂直按钮组。

我现在拥有什么

由于我没有找到内置功能，我从bootstrap sass复制了button-group-vertical并将其修改为可用于我的用例：

@mixin button-group-vertical-button-style($btn-border-radius) {
  > .btn {
    &:not(:first-child):not(:last-child) {
      border-radius: 0;
    }

    &:first-child:not(:last-child) {
      @include border-bottom-radius(0);
      @include border-top-radius($btn-border-radius);

      &:not(.dropdown-toggle) {
        @include border-bottom-radius(0);
        @include border-top-radius($btn-border-radius);
      }
    }

    &:last-child:not(:first-child) {
      @include border-top-radius(0);
      @include border-bottom-radius($btn-border-radius);
    }
  }

  > .btn-group:not(:first-child):not(:last-child) > .btn {
    border-radius: 0;
  }

  > .btn-group:first-child:not(:last-child) {
    > .btn:last-child,
    > .dropdown-toggle {
      @include border-bottom-radius(0);
      @include border-top-radius($btn-border-radius);
    }
  }

  > .btn-group:last-child:not(:first-child) > .btn:first-child {
    @include border-top-radius(0);
    @include border-bottom-radius($btn-border-radius);
  }
}

@mixin button-group-vertical-responsive($breakpoint-name) {
  .btn-group-vertical-#{$breakpoint-name} {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    .btn,
    .btn-group {
      width: 100%;
    }

    > .btn + .btn,
    > .btn + .btn-group,
    > .btn-group + .btn,
    > .btn-group + .btn-group {
      margin-top: -$input-btn-border-width;
      margin-left: 0;
    }

    @include button-group-vertical-button-style($btn-border-radius);

    &.btn-group-sm {
      @include button-group-vertical-button-style($btn-border-radius-sm);
    }
    &.btn-group-lg {
      @include button-group-vertical-button-style($btn-border-radius-lg);
    }
  }
}

@each $name, $width in $grid-breakpoints {
  @media (max-width: $width) {
    @include button-group-vertical-responsive($name);
  }
}

现在我可以用这种方式在我的标记中使用它：

<div class="btn-group btn-group-vertical-md"></div>

实际问题

这种方法工作正常，但不知怎的，我的直觉告诉我，这种方法不是很“干净”（从我的角度来看，sass本身也不是很干净，但我不知道如何做得更好我不是真正的sass专家。）

有人知道更好的解决方案还是处于同样的情况？

谢谢你！