cari

Rumah  >  Soal Jawab  >  teks badan

"Bootstrap 5 - Elemen penjajaran margin di dalam dan di luar akordion"

<p>Saya cuba menjajarkan tiga grid Bootstrap 5: </p> <ul> <li>Tajuk di luar akordion</li> <li>Gambaran keseluruhan dalam tajuk akordion</li> <li>Butiran dalam kandungan akordion</li> </ul> <p>Tajuk panel akordion mempunyai jidar/pelapis kiri dan kanan, dan ikon akordion mengambil sedikit ruang juga. </p> <p>Saya mahu tajuk dan grid butiran menggunakan "margin" yang sama seperti grid gambaran keseluruhan. </p> <p>Saya cuba menambah lajur dengan pelapik, seperti "ps-4 pe-4", tetapi saya hanya mendapat penjajaran anggaran yang terbaik. </p> <p></p> <pre class="brush:css;toolbar:false;">.colored-bg1 { latar belakang: kelabu muda } .colored-bg2 { latar belakang: kuning muda }</pre> <pre class="brush:html;toolbar:false;"><!doctype html> <html lang="en"> <kepala> <!-- Teg meta yang diperlukan --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <pautan href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztgincoCQyThh" "tanpa nama"> <title>Bootsrap 5 akordion</title> </head> <badan> <div class="bendalir-bekas"> <div class="row"> <div class="col-4 colored-bg1">Lajur 1 pengepala</div> <div class="col-4 colored-bg2">Pengepala Lajur 2</div> <div class="col-4 colored-bg1">Pengepala Lajur 3</div> </div> </div> <div class="accordion" id="accordionExample"> <div class="accordion-item"> <div class="accordion-header" id="headingOne"> <butang class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> ; <div class="bendalir-bekas"> <div class="row"> <div class="col-4 colored-bg1">Gambaran keseluruhan Lajur 1</div> <div class="col-4 colored-bg2">Gambaran keseluruhan Lajur 2</div> <div class="col-4 colored-bg1">Gambaran keseluruhan Lajur 3</div> </div> </div> </butang> </div> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body"> <div class="bendalir-bekas"> <div class="row"> <div class="col-4 colored-bg1">Butiran lajur 1</div> <div class="col-4 colored-bg2">Butiran lajur 2</div> <div class="col-4 colored-bg1">Butiran lajur 3</div> </div> <div class="row"> <div class="col-4 colored-bg1">Butiran lajur 1</div> <div class="col-4 colored-bg2">Butiran lajur 2</div> <div class="col-4 colored-bg1">Butiran lajur 3</div> </div> </div> </div> </div> </div> </div> & lt; skrip src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" tiaxvxm "crossorigin ="anonymous"></script> </badan> </html></pre> </p>
P粉834840856P粉834840856523 hari yang lalu670

membalas semua(1)saya akan balas

  • P粉447495069

    P粉4474950692023-09-01 10:56:13

    Bahagian gambaran keseluruhan dan butiran sudah menggunakan padding yang sama. Tambahkan div pembalut di sekeliling tajuk di atas akordion dan berikannya padding yang sama seperti bahagian gambaran dan butiran, iaitu 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 -->

    balas
    0
  • Batalbalas