简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
"Bootstrap 5 - Eléments d'alignement des marges à l'intérieur et à l'extérieur de l'accordéon"
P粉834840856
P粉834840856 2023-08-31 12:54:27
0
1
570
<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>
P粉834840856
P粉834840856

répondre à tous(1)
P粉447495069
P粉4474950692023-09-01 10:56:13 1 plancher

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 -->
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！