"Bootstrap 5 - Elemen penjajaran margin di dalam dan di luar akordion"
P粉834840856
2023-08-31 12:54:27
<p>Saya cuba menjajarkan tiga grid Bootstrap 5: </p>
<ul>
<li>Tajuk di luar akordion</li>
<li>Gambaran keseluruhan dalam tajuk akordion</li>
<li>Butiran dalam kandungan akordion</li>
</ul>
<p>Tajuk panel akordion mempunyai jidar/pelapis kiri dan kanan, dan ikon akordion mengambil sedikit ruang juga. </p>
<p>Saya mahu tajuk dan grid butiran menggunakan "margin" yang sama seperti grid gambaran keseluruhan. </p>
<p>Saya cuba menambah lajur dengan pelapik, seperti "ps-4 pe-4", tetapi saya hanya mendapat penjajaran anggaran yang terbaik. </p>
<p></p>
<pre class="brush:css;toolbar:false;">.colored-bg1 {
latar belakang: kelabu muda
}
.colored-bg2 {
latar belakang: kuning muda
}</pre>
<pre class="brush:html;toolbar:false;"><!doctype html>
<html lang="en">
<kepala>
<!-- Teg meta yang diperlukan -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<pautan href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztgincoCQyThh" "tanpa nama">
<title>Bootsrap 5 akordion</title>
</head>
<badan>
<div class="bendalir-bekas">
<div class="row">
<div class="col-4 colored-bg1">Lajur 1 pengepala</div>
<div class="col-4 colored-bg2">Pengepala Lajur 2</div>
<div class="col-4 colored-bg1">Pengepala Lajur 3</div>
</div>
</div>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<div class="accordion-header" id="headingOne">
<butang class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> ;
<div class="bendalir-bekas">
<div class="row">
<div class="col-4 colored-bg1">Gambaran keseluruhan Lajur 1</div>
<div class="col-4 colored-bg2">Gambaran keseluruhan Lajur 2</div>
<div class="col-4 colored-bg1">Gambaran keseluruhan Lajur 3</div>
</div>
</div>
</butang>
</div>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<div class="bendalir-bekas">
<div class="row">
<div class="col-4 colored-bg1">Butiran lajur 1</div>
<div class="col-4 colored-bg2">Butiran lajur 2</div>
<div class="col-4 colored-bg1">Butiran lajur 3</div>
</div>
<div class="row">
<div class="col-4 colored-bg1">Butiran lajur 1</div>
<div class="col-4 colored-bg2">Butiran lajur 2</div>
<div class="col-4 colored-bg1">Butiran lajur 3</div>
</div>
</div>
</div>
</div>
</div>
</div>
& lt; skrip src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" tiaxvxm "crossorigin ="anonymous"></script>
</badan>
</html></pre>
</p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Bahagian gambaran keseluruhan dan butiran sudah menggunakan padding yang sama. Tambahkan div pembalut di sekeliling tajuk di atas akordion dan berikannya padding yang sama seperti bahagian gambaran dan butiran, iaitu padding: 1rem 1.25rem;
<div style="padding: 1rem 1.15rem;"> <div class="container-fluid"> <div class="row"> <div class="col-4 colored-bg1">Column 1 header</div> <div class="col-4 colored-bg2">Column 2 header</div> <div class="col-4 colored-bg1">Column 3 header</div> </div> </div> </div> <!-- end snippet -->