我試圖將 h1 類添加到跨度內的標題文本也將其水平居中對齊，但引導類文本中心和 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>
uj5u.com熱心網友回復：
您需要navbar-brand從中洗掉span，因為這會覆寫H1的字體大小。您span還需要一個類，w-100因為它在一個彈性盒子中，并且會自動采用盡可能小的尺寸。或者，您可以將類添加到容器中，而不是添加w-100到您的容器中。spanjustify-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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/464167.html