在我正在使用Bootstrap / SASS(SCSS)开发的网站上我想让一个Bootstrap按钮组(.btn-group
)成为使用媒体选择器的垂直组(.btn-group-vertical
),而不是JavaScript。但是,@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();
}
}
我宁愿不更改原始bootstrap _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来解决这样的问题?
答案 0 :(得分: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/