header包括一個h1元素。
我添加到header：但出現了一個垂直滾動條。overflow-hidden我通過在 中添加類來洗掉它body，但header它不是垂直居中的（它略低于 x 軸中心）。
注意：如果我洗掉導航，垂直居中作業。
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Β?κχο?</span>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link active" aria-current="page">Αρχικ?</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">Αν?κδοτα</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a href="#" class="dropdown-item">Με βιλ?α</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<main>
<header class="d-flex flex-column justify-content-center align-items-center min-vh-100">
<h1 class="bg-primary">?ταν οι ???? ?φτιαχναν μιμ?, οι ?λλοι ?τρωγαν βελαν?δια και κρ?μονταν απ? τα δ?ντρα!</h1>
</header>
</main>
<footer>
<p>Footer</p>
</footer>uj5u.com熱心網友回復：
一個解決方案可能是使導航欄絕對定位，寬度設定為 100%。
這可以通過將一些引導類附加到導航來完成。
<nav class="navbar navbar-expand-sm bg-primary navbar-dark position-absolute w-100">
這使得標題相對于螢屏垂直居中。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/429634.html
上一篇：引導程式中的容器類有問題嗎？