简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
"Bootstrap 5 - 在手风琴内外对齐元素的边距"
P粉834840856
P粉834840856 2023-08-31 12:54:27
0
1
518
<p>我正在尝试对齐三个Bootstrap 5网格：</p> <ul> <li>折叠面板外的标题</li> <li>折叠面板标题中的概述</li> <li>折叠面板内容中的详细信息</li> </ul> <p>折叠面板标题有左右边距/填充，并且折叠图标也占用一些空间。</p> <p>我希望标题和详细信息的网格使用与概述网格相同的“边距”。</p> <p>我尝试添加一个带有填充的列，例如“ps-4 pe-4”，但最多只能获得近似对齐。</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>
第 3 列概览
</按钮>
<div class="accordion-body"> <div class="container-fluid"> <div class="row">
第 1 列详细信息
第 2 列详细信息
第 3 列详细信息
<div class="row">
第 1 列详细信息
第 2 列详细信息
第 3 列详细信息
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"跨域="匿名"></脚本> </正文> </html></pre> </p>
1
0
0
P粉834840856
P粉834840856

全部回复(1)
P粉447495069
P粉4474950692023-09-01 10:56:13 1 楼

概述和详细信息部分已经使用相同的填充。 在手风琴上方的标题周围添加一个包装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 -->
点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！