Twitter bootstrap 引导4-响应/包装按钮组 前提条件

我想使用bootstrap提供的。此外，对于特定屏幕大小，按钮组应切换为垂直按钮组

---

我现在有什么 由于我没有找到用于此功能的内置功能，我从引导sass复制了按钮组垂直，并将其修改为可用于我的用例：

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

---

---

---

现在，我可以这样在标记中使用它：

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

---

实际问题 这种方法效果很好，但不知何故，我的直觉告诉我，这种方法不是很“干净”（在我看来，sass本身也不是很干净，但我不知道如何做得更好，因为我不是真正的sass专家）

是否有人知道更好的解决方案，或者曾处于相同的情况

---

已经谢谢你了

我建议你在代码审查中提问，也许你是对的，谢谢！我建议你在代码审查中提问，也许你是对的，谢谢！

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