根据官方Bootstrap指南中展示的示例,使用边框类时调整边框宽度大小似乎很容易...
```html
```
但如果我们只想使用底部边框,例如...
```html
```
我们如何利用这些相同的尺寸选项呢?
我能在我的自定义.scss文件中写些什么来扩展utilities.scss文件(node_modules/bootstrap/scss/mixins/_utilities.scss),以允许底部边框有不同的边框大小吗?
我尝试了
```css
$utilities: map-merge(
$utilities,
(
"border-width": (
property: border-width,
class: border,
values: $border-widths
)
)
);
```
和
```css
$utilities: map-merge($utilities,
("border-width": map-merge(map-get($utilities, "border-width"),
(values: (
1: 1px,
2: 2px,
3: 3px,
4: 4px,
5: 5px,
),
))));
```
但当与`border-bottom`一起使用时,没有效果。
但即使我找到了解决方案...在utilities.scss文件中的以下Bootstrap规则有一个重要的语句应用到它的规则上...
![enter image description here](https://isstatic.askoverflow.dev/FFkkN8Vo.png)
有没有办法解决这个问题?
我能想到的唯一办法是如果我们设置一个switch case(SASS map)或多个if else语句过程来改变`--bs-border-width`的值,这取决于类的名称...?我完全不知道。
border-bottom border-5
在我这边运行良好。我建议你的 CSS 中可能有某些内容覆盖了这些类名 / 应用了不同的边框宽度到你尝试样式化的元素上。