4

在我正在使用 Bootstrap/SASS (SCSS) 开发的网站上，我希望使用媒体选择器而不是 JavaScript将 Bootstrap 按钮组 ( .btn-group) 变为垂直组 ( )。但是，在媒体选择器中不起作用.btn-group-vertical的众所周知的问题让我感到困惑。@extend例如，这会引发错误：

.navGroup {
    @extend .mt-1;
    @extend .btn-group;
    @include media-breakpoint-down(xs) {
        @extend .btn-group-vertical;
    }
}

如果我从头开始开发，我会重写.btn-group并.btn-group-vertical简单地@include使用 mixin，这样我就可以执行以下操作：

.navGroup {
    @extend .mt-1;
    @include media-breakpoint-up(xs) {
        @include btn-group-include();
    }
    @include media-breakpoint-down(xs) {
        @include btn-group-vertical-include();
    }
}

我宁愿不更改原始引导_buttonGroup.scss文件，因为它将在下一次发布/更新时被覆盖。所以我目前需要复制并过去整个.btn-group-vertical定义：

.navGroup {
    @extend .mt-1;
    @extend .btn-group;
    @include media-breakpoint-down(xs) {
        flex-direction: column;
        align-items: flex-start;
        /* etc. for 70 lines */
    }
}

有没有一种方法可以轻松地将现有的类定义转换为 Sass 中的 mixin 来解决这样的问题？

4

1 回答 1

0

您可以尝试使用 flex 类。抱歉，我不知道 navGroup 的标记。

<div class="d-flex flex-column">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

您可以在每个断点应用这些。结帐https://getbootstrap.com/docs/4.0/utilities/flex/

于 2018-06-16T02:43:11.660 回答