Согласно примерам, приведенным в официальном руководстве Bootstrap для границ, кажется, что регулировать ширину границы при использовании класса border легко...
<span class = "border border-1"></span>
<span class = "border border-2"></span>
<span class = "border border-3"></span>
<span class = "border border-4"></span>
<span class = "border border-5"></span>
Но как мы можем использовать те же параметры размера, если, например, мы хотим использовать только нижнюю границу...
<span class = "border-bottom border-1"></span>
<span class = "border-bottom border-2"></span>
<span class = "border-bottom border-3"></span>
<span class = "border-bottom border-4"></span>
<span class = "border-bottom border-5"></span>
Могу ли я что-нибудь написать в своем собственном файле .scss, чтобы расширить файл Utilities.scss (node_modules/bootstrap/scss/mixins/_utilities.scss), чтобы нижняя граница имела разные размеры границ?
Я пытался
$utilities: map-merge(
$utilities,
(
"border-width": (
property: border-width,
class: border,
values: $border-widths
)
)
);
и
$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
.
Но даже если бы мне удалось найти решение... к следующему правилу Bootstrap из файла Utilities.scss применено важное утверждение...
Есть ли способ выиграть это?
Единственное, о чем я могу думать, это если мы настроим регистр переключения (карта SASS) или несколько процессов оператора if else, чтобы изменить значение --bs-border-width
, в зависимости от имени класса...? Я понятия не имею.
border-bottom border-5
с моей стороны работает отлично. Я предлагаю вам иметь что-то в вашем CSS, которое переопределяет эти имена классов/применяет другую ширину границы к элементам, которые вы пытаетесь стилизовать.
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin = "anonymous">
<div class = "container mt-2">
<h2 class = "border-bottom border-1 border-secondary p-2">Border bottom 1</h2>
<h2 class = "border-bottom border-2 border-danger p-2">Border bottom 2</h2>
<h2 class = "border-bottom border-3 border-success p-2">Border bottom 3</h2>
<h2 class = "border-bottom border-4 border-primary p-2">Border bottom 4</h2>
<h2 class = "border-bottom border-5 border-warning p-2">Border bottom 5</h2>
</div>