<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark py-3">
<div class="container">
<div class="navbar-brand mx-auto"><h2 style="color: white;">Name</h2></div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#burger"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="burger">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a href="#python" class="nav-link px-3"><h2 style="color: white;">Python</h2></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link px-3"><h2 style="color: white;">Name</h2></a>
</li>
<li class="nav-item">
<a href="#html&css" class="nav-link px-3"><h2 style="color: white;">Html&Css</h2></a>
</li>
</ul>
</div>
</div>
</nav>
<!--Secion One-->
<section class="bg-dark text-light p-5 p-lg-0 text-center text-md-start">
<div class="container">
<div class="row align-items-center text-center">
<h1 class="hi">Design made by the <span style="color: #F23DFF;">youth</span></h1>
</div>
</div>
</section>
</body>
这是它现在的样子! (https://media.discordapp.net/attachments/855988935149486120/896932433319059487/unknown.png?width=609&身高= 406)
使用flex:
<body class="h-100 d-flex flex-column">
<nav class="navbar navbar-expand-md bg-dark navbar-dark py-3">
<div class="container">
<div class="navbar-brand mx-auto">
<h2 style="color: white">Name</h2>
</div>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#burger">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="burger">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a href="#python" class="nav-link px-3">
<h2 style="color: white">Python</h2>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link px-3">
<h2 style="color: white">Name</h2>
</a>
</li>
<li class="nav-item">
<a href="#html&css" class="nav-link px-3">
<h2 style="color: white">Html&Css</h2>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!--Secion One-->
<section
class="
d-flex
align-items-center
flex-1
justify-items-center
bg-dark
text-light
p-5 p-lg-0
text-center text-md-start
">
<div class="container">
<div class="row align-items-center text-center">
<h1 class="hi">
Design made by the <span style="color: #f23dff">youth</span>
</h1>
</div>
</div>
</section>
</body>
你唯一应该注意的是，包装的HTML可能没有采用完整的高度，所以添加以下css:
html{
height:100%
}
.flex-1{
flex: 1;
}