简体中文(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
517
<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/azprG1Anm3QDJLIm9Na3 "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 列詳細資料
<腳本 src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM"crossorigin="匿名」></腳本> </正文> </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學習者快速成長！