"Bootstrap 5 - Eléments d'alignement des marges à l'intérieur et à l'extérieur de l'accordéon"
P粉834840856
2023-08-31 12:54:27
<p>J'essaie d'aligner trois grilles Bootstrap 5 : </p>
<ul>
<li>Titre extérieur accordéon</li>
<li>Aperçu dans le titre accordéon</li>
<li>Détails dans le contenu de l'accordéon</li>
</ul>
<p>Le titre du panneau en accordéon comporte des marges/remplissages gauche et droit, et l'icône en accordéon prend également de la place. </p>
<p>Je souhaite que les grilles de titre et de détails utilisent les mêmes "marges" que la grille de présentation. </p>
<p>J'ai essayé d'ajouter une colonne avec un remplissage, comme "ps-4 pe-4", mais je n'obtiens au mieux qu'un alignement approximatif. </p>
<p></p>
<pre class="brush:css;toolbar:false;">.colored-bg1 {
fond : gris clair
}
.coloré-bg2 {
fond : jaune clair
}</pré>
<pre class="brush:html;toolbar:false;"><!doctype html>
<html lang="fr">
<tête>
<!-- Balises méta obligatoires -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS --->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" Integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin= "anonyme">
<title>Accordéon Bootsrap 5</title>
≪/tête>
<corps>
<div class="conteneur-fluide">
<div class="ligne">
<div class="col-4 coloured-bg1">En-tête de la colonne 1</div>
<div class="col-4 coloured-bg2">En-tête de la colonne 2</div>
<div class="col-4 coloured-bg1">En-tête de la colonne 3</div>
</div>
</div>
<div class="accordéon" id="accordionExample">
<div class="accordéon-item">
<div class="accordion-header" id="headingOne">
<button class="bouton accordéon effondré" type="bouton" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> ;
<div class="conteneur-fluide">
<div class="ligne">
<div class="col-4 coloured-bg1">Aperçu de la colonne 1</div>
<div class="col-4 coloured-bg2">Aperçu de la colonne 2</div>
<div class="col-4 coloured-bg1">Aperçu de la colonne 3</div>
</div>
</div>
</bouton>
</div>
<div id="collapseOne" class="accordion-collapseeffondrement show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<div class="conteneur-fluide">
<div class="ligne">
<div class="col-4 coloured-bg1">Détails de la colonne 1</div>
<div class="col-4 coloured-bg2">Détails de la colonne 2</div>
<div class="col-4 coloured-bg1">Détails de la colonne 3</div>
</div>
<div class="ligne">
<div class="col-4 coloured-bg1">Détails de la colonne 1</div>
<div class="col-4 coloured-bg2">Détails de la colonne 2</div>
<div class="col-4 coloured-bg1">Détails de la colonne 3</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" Integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" origine croisée ="anonyme"></script>
</corps>
</html></pre>
</p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Les sections de présentation et de détails utilisent déjà le même remplissage. Ajoutez un div enveloppant autour du titre au-dessus de l'accordéon et donnez-lui le même remplissage que les sections de présentation et de détails, c'est-à-dire remplissage : 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 -->