Я пытался добавить класс h1 в текст заголовка внутри диапазона, а также выровнять его по центру по горизонтали, но классы начальной загрузки text-center и h1 не работают. позже я обнаружил, что fs-1 и mx-auto работают. Чем это вызвано? Можно ли использовать элемент h1 только внутри тега p?
<!doctype html>
<html lang = "en">
<head>
<!-- Required meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin = "anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class = "container">
<nav class = "navbar navbar-light mt-3 rounded border border-3 border-dark " style = "background-color: black;">
<div class = "container-fluid text-center ">
<span class = "navbar-brand mb-0 h1 text-center" style = "color: white; cursive;">Header</span>
</div>
</nav>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin = "anonymous"></script>
</body>
</html>
Вам нужно удалить navbar-brand
из span
, так как это переопределяет размер шрифта H1
. Вашему span
также нужен класс w-100
, так как он находится в гибком блоке и автоматически займет минимально возможный размер. Или вместо добавления w-100
к вашему span
вы можете добавить класс justify-content-center
в свой контейнер.
<!doctype html>
<html lang = "en">
<head>
<!-- Required meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin = "anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class = "container">
<nav class = "navbar navbar-light mt-3 rounded border border-3 border-dark " style = "background-color: black;">
<div class = "container-fluid text-center">
<span class = "mb-0 h1 w-100" style = "color: white; cursive;">Header</span>
</div>
</nav>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin = "anonymous"></script>
</body>
</html>