Hadkan ketinggian segmen akordion yang runtuh Bootstrap 5 Vue3

Question

Saya sedang membina aplikasi web menggunakan Vue3 dan bootstrap 5. Tetapi saya fikir soalan ini hanya berkenaan bootstrap. Apa yang saya mahu lakukan ialah mengehadkan ketinggian segmen akordion yang runtuh supaya ia tidak menendang segmen lain terlalu rendah apabila kandungannya panjang.

Apa yang saya cuba ialah menambah ketinggian maksimum dan Limpahan: auto pada kelas .runtuh dan saya telah menambah "runtuh" ​​pada kelas akordion tetapi kemudian akordion menatal ke ketinggian itu dan selepas satu saat melonjak ke Kembang penuh. Dalam folder bootstrap node_modules, saya melihat _accordion.scss dan menukar "overflow-anchor" kepada auto, tetapi tiada apa yang berubah.

.collapsing {
  max-height: 100px !important;
  overflow: auto !important;
}

Dalam fail contoh ini, saya baru sahaja mengambil contoh akordion daripada bootstrap (di bawah "Flush"), jadi fail vue saya kelihatan seperti ini:

<template>
  <div class="accordion accordion-flush" id="accordionFlushExample">
    <div class="accordion-item">
      <h2 class="accordion-header" id="flush-headingOne">
        <button
          class="accordion-button collapsed"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#flush-collapseOne"
          aria-expanded="false"
          aria-controls="flush-collapseOne"
        >
          Accordion Item #1
        </button>
      </h2>
      <div
        id="flush-collapseOne"
        class="accordion-collapse collapse"
        aria-labelledby="flush-headingOne"
        data-bs-parent="#accordionFlushExample"
      >
        <div class="accordion-body">
          Placeholder<br />this must be long <br />this must be long <br />this
          must be long <br />this must be long <br />this must be long
          <br />this must be long <br />this must be long <br />this must be
          long <br />this must be long(thats what she said) <br />
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header" id="flush-headingTwo">
        <button
          class="accordion-button collapsed"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#flush-collapseTwo"
          aria-expanded="false"
          aria-controls="flush-collapseTwo"
        >
          Accordion Item #2
        </button>
      </h2>
      <div
        id="flush-collapseTwo"
        class="accordion-collapse collapse"
        aria-labelledby="flush-headingTwo"
        data-bs-parent="#accordionFlushExample"
      >
        <div class="accordion-body">
          Placeholder content for this accordion, which is intended to
          demonstrate the <code>.accordion-flush</code> class. This is the
          second item's accordion body. Let's imagine this being filled with
          some actual content.
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "stackoverflowquestion",
};
</script>

<style>
.collapsing {
  max-height: 100px !important;
  overflow: auto !important;
}
</style>

Ada idea? Terima kasih

Answer 1

Terjumpa! Anda perlu meletakkan kelas dalam badan akordion. Jadi mula-mula tentukan kelas, contohnya

.restrict-collapsing {
  max-height: 100px !important;
  overflow: auto !important;
}

Kemudian panggilnya dalam kurungan yang sama dengan badan Akordion