CSS-классы верхнего ряда px-4 в проекте Blazor
Я пытаюсь изменить стандартный макет, который поставляется с любым проектом Blazor, например. WASM или сервер, но меня немного смущают top-row px-4css классы.
Вот HTML-код, который, кажется, определяет верхнюю строку/раздел заголовка:
<div class = "top-row px-4">
Я не могу найти ссылку на top-row в файле app.css. Где определен этот класс? Я далеко не эксперт по CSS, но я не нашел никаких упоминаний об этом в файле Bootstrap, т. е. bootstrap.min.css.
Кроме того, я нашел определение px-4 в файле boostrap.min.css, но на веб-сайте Bootstrap я не вижу никакой документации по этому поводу.
Являются ли они стандартными классами Bootstrap или специфичными для этого макета? Если top-row характерно для этого макета, почему я нигде не могу найти его определение? Точно так же я вижу px-4, определенный в bootstrap.min.css, но в документации Bootstrap он не упоминается! Может ли кто-нибудь помочь мне понять, откуда взялись эти классы - желательно ссылку на какую-нибудь документацию?
Кстати, версия Bootstrap, используемая в шаблонах проектов Blazor, похоже 5.1.0
Ответы 1
top-row определяется в Mainlayout.razor.css. Строка 15 и далее для различной ширины носителя.
.top-row {
background-color: #f7f7f7;
border-bottom: 1px solid #d6d5d5;
justify-content: flex-end;
height: 3.5rem;
display: flex;
align-items: center;
}
/... lots more
px-4 — сокращение от заполнения в направлении x. Видеть:
https://getbootstrap.com/docs/5.0/utilities/spacing/#notation
Большое спасибо! Я очень ценю ваш подробный ответ. Я даже не заметил файл
cssдляMainLayout.razorв Visual Studio, но он там есть. Просто нужно было расширитьсяMainLayout.razor. Еще раз спасибо!