<p>3개의 Bootstrap 5 그리드를 정렬하려고 합니다: </p>
- 아코디언 외부 제목
- 아코디언 제목의 개요
<li>아코디언 내용의 세부정보</li>
</ul>
<p>아코디언 패널 제목에는 왼쪽 및 오른쪽 여백/패딩이 있으며 아코디언 아이콘도 일부 공간을 차지합니다. </p>
<p>제목 및 세부정보 그리드에서 개요 그리드와 동일한 "여백"을 사용하고 싶습니다. </p>
<p>"ps-4 pe-4"와 같이 패딩이 있는 열을 추가하려고 시도했지만 기껏해야 대략적인 정렬만 얻을 수 있었습니다. </p>
<p></p>
<pre class="brush:css;toolbar:false;">.color-bg1 {
배경: 밝은 회색
}
.color-bg2 {
배경: 밝은 노란색
}</pre>
<pre class="brush:html;toolbar:false;"><!doctype html>
<html lang="ko">
<머리>
<!-- 필수 메타 태그 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- 부트스트랩 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" 무결성="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin= "익명">
<title>부츠랩 5 아코디언</title>
</머리>
<본문>
<div class="컨테이너-유체">
<div class="행">
<div class="col-4 Coloured-bg1">열 1 헤더</div>
<div class="col-4 Coloured-bg2">열 2 헤더</div>
<div class="col-4 Coloured-bg1">3번째 열 헤더</div>
</div>
</div>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<div class="accordion-header" id="headingOne">
<button class="accordion-buttoncollapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> ;
<div class="컨테이너-유체">
<div class="행">
<div class="col-4 Coloured-bg1">열 1 개요</div>
<div class="col-4 Coloured-bg2">2열 개요</div>
<div class="col-4 Coloured-bg1">3열 개요</div>
</div>
</div>
</버튼>
</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="행">
<div class="col-4 Coloured-bg1">1열 세부정보</div>
<div class="col-4 Coloured-bg2">2열 세부정보</div>
<div class="col-4 Coloured-bg1">3번째 열 세부정보</div>
</div>
<div class="행">
<div class="col-4 Coloured-bg1">열 1 세부정보</div>
<div class="col-4 Coloured-bg2">2열 세부정보</div>
<div class="col-4 Coloured-bg1">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" 무결성="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 크로스오리진 ="익명"></script>
</body>
</html></pre>
</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
개요 및 세부정보 섹션은 이미 동일한 패딩을 사용하고 있습니다. 아코디언 위의 제목 주위에 래핑 div를 추가하고 개요 및 세부정보 섹션과 동일한 패딩을 지정합니다. 예: 패딩: 1rem 1.25rem;
으아악