限制折叠手风琴段的高度 Bootstrap 5 Vue 3

Question

我正在使用 Vue3 和 bootstrap 5 构建一个 Web 应用程序。但我认为这个问题只涉及 bootstrap。我想要做的是限制折叠的手风琴段的高度，所以当它的内容很长时它不会将其他段踢得太低。

我尝试将 max-height 和 overflow: auto 添加到类 .collapsing 中，并且我已经在手风琴的类中添加了“折叠”，但随后手风琴滚动到高度并在一秒钟后跳转到完全展开.在 node_modules 引导文件夹中，我查看了 _accordion.scss 并将“overflow-anchor”更改为 auto，但没有任何改变。

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

在这个示例文件中，我只是从bootstrap(under "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;
}

然后在与手风琴主体相同的括号内调用它

<div class="accordion-body restrict_collapsing">
          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>