限制折疊手風琴段的高度 Bootstrap 5 Vue3

Question

我正在使用 Vue3 和 bootstrap 5 建立一個網頁應用程式。但我認為這個問題只涉及 bootstrap。我想要做的是限制折疊的手風琴段的高度，這樣當其內容很長時，它不會將其他段踢得太低。

我嘗試的是將max-height 和Overflow: auto 添加到類.collapsing 中，並且我已經將“collapsing”添加到手風琴的類中，但隨後手風琴滾動到該高度，一秒鐘後跳轉到完全展開。在 node_modules bootstrap 資料夾中，我查看了 _accordion.scss 並將“overflow-anchor”更改為 auto，但沒有任何更改。

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

在這個範例文件中，我只是從 bootstrap 中獲取了手風琴示例（在“Flush”下），所以我的 vue 文件如下所示：

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

有什麼想法嗎？謝謝

Answer 1

找到了！ 你必須把類放在手風琴體中。 所以先定義一個類，例如

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

然後在與 Accordion-body 相同的括號內呼叫它