我试图有一个页面上有7个图标。在每个图标下面，我想要一个简短的链接和一个小句子。此外，我试图得到4个图标水平上的一行和3水平上的第二行。我已经设法得到文本和链接的方式，我想要它，但我似乎不能对齐他们在一行水平。下面是我的代码:
<div class="col-sm-12" style="text-align: center; align-content: center; padding:25px; display:flex; flex-wrap: wrap; width: 100%;">
<div class="row" style="text-align:center;">
<div class="col-sm-12">
<div class="placeholder1" style="position: relative; inline-block;">
<i class="fa-solid fa-users fa-4x" style="padding: 18px;"></i>
<a href="https://myfire.helpdocs.com/idt-team" style="font-size: 12pt; text-decoration:underline;">IDT Team</a>
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder2" style="position: relative; inline-block;">
<i class="fa-solid fa-computer fa-4x" style="padding: 18px;"></i>
<a href="https://myfire.helpdocs.com/authentication" style="font-size: 12pt; text-decoration:underline;">Login Assistance</a>
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder3" style="position: relative; inline-block;">
<i class="fa-solid fa-people-line fa-4x" style="padding: 18px;"></i>
<a href="https://myfire.helpdocs.com/students" style="font-size: 12pt; text-decoration:underline;">Students</a>
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder3" style="position: relative; inline-block;">
<i class="fa-solid fa-file-pen fa-4x" style="padding: 18px;"></i>
<a href="https://myfire.helpdocs.com/myfire-updates" style="font-size: 12pt; text-decoration:underline;">MyFIRE Updates</a>
<p>One sentence blurb<br>describing this item.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<i class="fa-solid fa-database fa-4x" style="padding: 100px;"></i>
<i class="fa-solid fa-chalkboard fa-4x" style="padding: 100px;"></i>
<i class="fa-solid fa-person-chalkboard fa-4x" style="padding: 100px;"></i>
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/4fd8df5f9a.js" crossorigin="anonymous"></script>通过去掉"one_answers"相对位置"元素，我能够在每行上实现所需的内容。此外，我还添加了一个"display: flex"one_answers";flex-wrap"元素添加到"行"中。此外，我还添加了meta "viewport"链接在HTML的头部，以保持响应。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
</head>
<body>
<div class="row" style="text-align:center; align-items: center; display:flex; flex-wrap: wrap; width: 100%; justify-content: center;">
<div class="placeholder1" style="inline-block;">
<i class="fa-solid fa-users fa-4x" style="padding: 18px;"></i>
<a href="https://myfire.helpdocs.com/idt-team" style="font-size: 12pt; text-decoration:underline;">IDT Team</a>
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder2" style="inline-block;">
<i class="fa-solid fa-computer fa-4x" style="padding: 18px;"></i>
<a href="https://myfire.helpdocs.com/authentication" style="font-size: 12pt; text-decoration:underline;">Login Assistance</a>
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder3" style="inline-block;">
<i class="fa-solid fa-people-line fa-4x" style="padding: 18px;"></i>
<a href="https://myfire.helpdocs.com/students" style="font-size: 12pt; text-decoration:underline;">Students</a>
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder3" style="inline-block;">
<i class="fa-solid fa-file-pen fa-4x" style="padding: 18px;"></i>
<a href="https://myfire.helpdocs.com/myfire-updates" style="font-size: 12pt; text-decoration:underline;">MyFIRE Updates</a>
<p>One sentence blurb<br>describing this item.</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<i class="fa-solid fa-database fa-4x" style="padding: 100px;"></i>
<i class="fa-solid fa-chalkboard fa-4x" style="padding: 100px;"></i>
<i class="fa-solid fa-person-chalkboard fa-4x" style="padding: 100px;"></i>
</div>
</div>
<script src="https://kit.fontawesome.com/4fd8df5f9a.js" crossorigin="anonymous"></script>
</body>
</html>使用您当前的结构，您可以在col-sm-12div上添加d-flex和justify-content-around作为类。然后在row上设置w-100，以便它们跨越整个宽度。
见下文:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="col-sm-12" style="text-align: center; align-content: center; padding:25px; display:flex; flex-wrap: wrap; width: 100%;">
<div class="row w-100" style="text-align:center;">
<div class="col-sm-12 d-flex justify-content-around align-items-center flex-wrap">
<div class="placeholder1" style="position: relative; inline-block;">
<i class="fa-solid fa-users fa-4x" style="padding: 18px;"></i>
<a href="https://myfire.helpdocs.com/idt-team" style="font-size: 12pt; text-decoration:underline;">IDT Team</a>
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder2" style="position: relative; inline-block;">
<i class="fa-solid fa-computer fa-4x" style="padding: 18px;"></i>
<a href="https://myfire.helpdocs.com/authentication" style="font-size: 12pt; text-decoration:underline;">Login Assistance</a>
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder3" style="position: relative; inline-block;">
<i class="fa-solid fa-people-line fa-4x" style="padding: 18px;"></i>
<a href="https://myfire.helpdocs.com/students" style="font-size: 12pt; text-decoration:underline;">Students</a>
<p>One sentence blurb<br>describing this item.</p>
</div>
<div class="placeholder3" style="position: relative; inline-block;">
<i class="fa-solid fa-file-pen fa-4x" style="padding: 18px;"></i>
<a href="https://myfire.helpdocs.com/myfire-updates" style="font-size: 12pt; text-decoration:underline;">MyFIRE Updates</a>
<p>One sentence blurb<br>describing this item.</p>
</div>
</div>
</div>
<div class="row w-100">
<div class="col-sm-12 d-flex justify-content-around align-items-center">
<i class="fa-solid fa-database fa-4x" style="padding: 100px;"></i>
<i class="fa-solid fa-chalkboard fa-4x" style="padding: 100px;"></i>
<i class="fa-solid fa-person-chalkboard fa-4x" style="padding: 100px;"></i>
<i class="null" style="padding: 100px;"></i>
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/4fd8df5f9a.js" crossorigin="anonymous"></script>您想要的布局很容易通过使用BS网格获得。如果你想把4个项目放在一行，把它们分别放在.col-3中，然后把它们都放在.row中
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid">
<div class="row justify-content-center text-center">
<div class="col-3">
<div class="placeholder1">
<i class="fa-solid fa-users fa-4x" style="padding: 18px;"></i><br>
<a href="https://myfire.helpdocs.com/idt-team" style="font-size: 12pt; text-decoration:underline;">IDT Team</a>
<p>One sentence blurb<br>describing this item.</p>
</div>
</div>
<div class="col-3">
<div class="placeholder2">
<i class="fa-solid fa-computer fa-4x" style="padding: 18px;"></i><br>
<a href="https://myfire.helpdocs.com/authentication" style="font-size: 12pt; text-decoration:underline;">Login Assistance</a>
<p>One sentence blurb<br>describing this item.</p>
</div>
</div>
<div class="col-3">
<div class="placeholder3">
<i class="fa-solid fa-people-line fa-4x" style="padding: 18px;"></i><br>
<a href="https://myfire.helpdocs.com/students" style="font-size: 12pt; text-decoration:underline;">Students</a>
<p>One sentence blurb<br>describing this item.</p>
</div>
</div>
<div class="col-3">
<div class="placeholder3">
<i class="fa-solid fa-file-pen fa-4x" style="padding: 18px;"></i><br>
<a href="https://myfire.helpdocs.com/myfire-updates" style="font-size: 12pt; text-decoration:underline;">MyFIRE Updates</a>
<p>One sentence blurb<br>describing this item.</p>
</div>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-3">
<i class="fa-solid fa-database fa-4x"></i>
</div>
<div class="col-3">
<i class="fa-solid fa-chalkboard fa-4x"></i>
</div>
<div class="col-3">
<i class="fa-solid fa-person-chalkboard fa-4x"></i>
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/4fd8df5f9a.js" crossorigin="anonymous"></script>