简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
"Bootstrap 5 - Margin aligning elements inside and outside the accordion"
P粉834840856
P粉834840856 2023-08-31 12:54:27
0
1
543
<p>I'm trying to align three Bootstrap 5 grids: </p> <ul> <li>Title outside accordion</li> <li>Overview in accordion title</li> <li>Details in accordion content</li> </ul> <p>The accordion panel title has left and right margins/padding, and the accordion icon also takes up some space. </p> <p>I want the title and details grids to use the same "margins" as the overview grid. </p> <p>I tried adding a column with padding, like "ps-4 pe-4", but I only get approximate alignment at best. </p> <p></p> <pre class="brush:css;toolbar:false;">.colored-bg1 { background: lightgray } .colored-bg2 { background: lightyellow }</pre> <pre class="brush:html;toolbar:false;"><!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></pre> </p>
P粉834840856
P粉834840856

reply all(1)
P粉447495069
P粉4474950692023-09-01 10:56:13 1 floor

Overview and details sections already use the same padding. Add a wrapping div around the title above the accordion and give it the same padding as the overview and details sections, i.e. 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 -->
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！