我正在尝试对齐三个Bootstrap 5网格：
折叠面板标题有左右边距/填充，并且折叠图标也占用一些空间。
我希望标题和详细信息的网格使用与概述网格相同的“边距”。
我尝试添加一个带有填充的列，例如“ps-4 pe-4”，但最多只能获得近似对齐。
1
1058.colored-bg1 {
background: lightgray
}
.colored-bg2 {
background: lightyellow
}
<!doctype html>
<html lang="en">
<head>
<!-- Required 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="anonymous">
<title>Bootsrap 5 accordion</title>
</head>
<body>
<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 class="accordion" id="accordionExample">
<div class="accordion-item">
<div class="accordion-header" id="headingOne">
<button class="accordion-button collapsed" 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 colored-bg1">Column 1 overview</div>
<div class="col-4 colored-bg2">Column 2 overview</div>
<div class="col-4 colored-bg1">Column 3 overview</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 colored-bg1">Column 1 details</div>
<div class="col-4 colored-bg2">Column 2 details</div>
<div class="col-4 colored-bg1">Column 3 details</div>
</div>
<div class="row">
<div class="col-4 colored-bg1">Column 1 details</div>
<div class="col-4 colored-bg2">Column 2 details</div>
<div class="col-4 colored-bg1">Column 3 details</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="anonymous"></script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
概述和详细信息部分已经使用相同的填充。 在手风琴上方的标题周围添加一个包装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 -->