Begrenzen Sie die Höhe der zusammengeklappten Akkordeonsegmente Bootstrap 5 Vue3

Question

Ich erstelle eine Webanwendung mit Vue3 und Bootstrap 5. Aber ich denke, diese Frage betrifft nur Bootstrap. Ich möchte die Höhe des ausgeblendeten Akkordeonsegments begrenzen, damit es die anderen Segmente nicht zu sehr nach unten drängt, wenn der Inhalt lang ist.

Was ich versucht habe, war das Hinzufügen von max-height und Overflow: auto zur Klasse .collapsing und ich habe „collapsing“ zur Klasse des Akkordeons hinzugefügt, aber dann scrollt das Akkordeon auf diese Höhe und springt nach einer Sekunde zur vollständigen Erweiterung. Im Bootstrap-Ordner node_modules habe ich mir _accordion.scss angesehen und „overflow-anchor“ in „auto“ geändert, aber es hat sich nichts geändert.

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

In dieser Beispieldatei habe ich gerade das Akkordeon-Beispiel von Bootstrap (unter „Flush“) übernommen, daher sieht meine Vue-Datei so aus:

<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>

Irgendwelche Ideen? Danke

Answer 1

找到了！ 你必须把类放在手风琴体中。 所以首先定义一个类，例如

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

然后在与 Accordion-body 相同的括号内调用它