我正在嘗試創建一個帶有 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>uj5u.com熱心網友回復：
通過洗掉“col-sm-12”和“position relative”元素，我能夠在每一行上實作所需的內容。此外，我在“row”父 div 中添加了“display: flex”和“flex-wrap”元素。此外，我在 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>uj5u.com熱心網友回復：
使用您當前的結構，您可以在div上添加d-flex和justify-content-around作為類。col-sm-12然后設定w-100在你的row，這樣它們就跨越了整個寬度。
見下文：
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>uj5u.com熱心網友回復：
使用BS 網格很容易獲得您想要的布局。如果您想將 4 個專案放在一起，請將它們每個放在 a.col-3中，然后將所有這些放在 a 中.row
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/473120.html