„Bootstrap 5 – Rand, der Elemente innerhalb und außerhalb des Akkordeons ausrichtet'
P粉834840856
2023-08-31 12:54:27
<p>Ich versuche, drei Bootstrap 5-Raster auszurichten: </p>
<ul>
<li>Titel außerhalb Akkordeon</li>
<li>Übersicht im Akkordeontitel</li>
<li>Details im Akkordeoninhalt</li>
</ul>
<p>Der Titel des Akkordeon-Bedienfelds hat einen linken und einen rechten Rand/Abstand, und das Akkordeon-Symbol nimmt ebenfalls etwas Platz ein. </p>
<p>Ich möchte, dass die Titel- und Detailraster dieselben „Ränder“ wie das Übersichtsraster verwenden. </p>
<p>Ich habe versucht, eine Spalte mit Auffüllung hinzuzufügen, etwa „ps-4 pe-4“, aber ich erhalte bestenfalls nur eine ungefähre Ausrichtung. </p>
<p></p>
<pre class="brush:css;toolbar:false;">.colored-bg1 {
Hintergrund: hellgrau
}
.colored-bg2 {
Hintergrund: hellgelb
}</pre>
<pre class="brush:html;toolbar:false;"><!doctype html>
<html lang="de">
<Kopf>
<!-- Erforderliche Meta-Tags -->
<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= „anonym“>
<title>Bootsrap 5 Akkordeon</title>
</head>
<Körper>
<div class="container-fluid">
<div class="row">
<div class="col-4 colour-bg1">Spalte 1 Kopfzeile</div>
<div class="col-4 colour-bg2">Spalte 2 Kopfzeile</div>
<div class="col-4 colour-bg1">Spalte 3 Kopfzeile</div>
</div>
</div>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<div class="accordion-header" id="headingOne">
<button class="accordion-button minimiert" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> ;
<div class="container-fluid">
<div class="row">
<div class="col-4 colour-bg1">Übersicht über Spalte 1</div>
<div class="col-4 colour-bg2">Übersicht über Spalte 2</div>
<div class="col-4 colour-bg1">Übersicht über Spalte 3</div>
</div>
</div>
</button>
</div>
<div id="collapseOne" class="accordion-collapse Collapse Show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<div class="container-fluid">
<div class="row">
<div class="col-4 colour-bg1">Details zu Spalte 1</div>
<div class="col-4 colour-bg2">Details zu Spalte 2</div>
<div class="col-4 colour-bg1">Details zu Spalte 3</div>
</div>
<div class="row">
<div class="col-4 colour-bg1">Details zu Spalte 1</div>
<div class="col-4 colour-bg2">Details zu Spalte 2</div>
<div class="col-4 colour-bg1">Details zu Spalte 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" Crossorigin ="anonym"></script>
</body>
</html></pre>
</p>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
概述和详细信息部分已经使用相同的填充。 在手风琴上方的标题周围添加一个包装div，并给它与概述和详细信息部分相同的填充，即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 -->