覆盖引导系统中的scss文件

Question

我发现语言选择器文本是通过名为_visual -hidden.scss的scss文件隐藏的。我在joomla4上使用RSJoomla模板。scss文件位于website mediavendorbootstrapscsshelpers_visual -hidden.scss文件夹中功能如下:

//
// Visually hidden
//
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
@include visually-hidden();
}

我想让这个文本指示器可见，但我没有成功地覆盖这个功能与正常的css。当然，我可以"删除"。文件。scss但谁知道其他东西会改变不想要的。此外，随着系统的更新，可能还包括一个Bootstrap更新，我认为我的更改被覆盖了。

是否有一些简单的方法使覆盖?我不熟悉的代码在scss文件。你会看语言选择器在现实中，访问我的网站https://ambert-camping.com/index.php/fr/

期待你的反应，谢谢，Ron

Answer 1

这是Bootstrap Mixin导致的:

@mixin visually-hidden() {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}

如果你选择一个更强的选择器，比如

p.visually-hidden, 
p.visually-hidden-focusable:not(:focus):not(:focus-within) 

用

覆盖三个最相关的属性

width: auto!important;
height: auto!important;
position: static!important;

你应该能够使元素的CSS样式可见。