我团队的应用程序正在使用bootstrap sass进行某些样式设置,但具有某些自定义功能。引导程序文件是通过构建过程添加到我们的项目中的,因此我无法直接对其进行修改。
对于下拉切换元素,引导程序会添加一个小插入符,我想将其删除。但这是通过@include完成的(如下所示)。
.dropdown-toggle {
// Generate the caret automatically
@include caret;
}
我该如何在本地sass文件中覆盖此内容以删除/从不显示插入符号?
编辑:这是我最终使用的修复程序。虽然不完美,但是可以。
.dropdown-toggle::after {
border: none !important;
}
这是插入符号混合:
@mixin caret-down {
border-top: $caret-width solid;
border-right: $caret-width solid transparent;
border-bottom: 0;
border-left: $caret-width solid transparent;
}
@mixin caret-up {
border-top: 0;
border-right: $caret-width solid transparent;
border-bottom: $caret-width solid;
border-left: $caret-width solid transparent;
}
@mixin caret-right {
border-top: $caret-width solid transparent;
border-bottom: $caret-width solid transparent;
border-left: $caret-width solid;
}
@mixin caret-left {
border-top: $caret-width solid transparent;
border-right: $caret-width solid;
border-bottom: $caret-width solid transparent;
}
@mixin caret($direction: down) {
@if $enable-caret {
&::after {
display: inline-block;
width: 0;
height: 0;
margin-left: $caret-width * .85;
vertical-align: $caret-width * .85;
content: "";
@if $direction == down {
@include caret-down;
} @else if $direction == up {
@include caret-up;
} @else if $direction == right {
@include caret-right;
}
}
@if $direction == left {
&::after {
display: none;
}
&::before {
display: inline-block;
width: 0;
height: 0;
margin-right: $caret-width * .85;
vertical-align: $caret-width * .85;
content: "";
@include caret-left;
}
}
&:empty::after {
margin-left: 0;
}
}
}
答案 0 :(得分:0)
好的,您可以使用以下方法覆盖和删除插入符号:
.dropdown-toggle {
&:after, &:before {
display: none;
}
}