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

Question

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

我尝试的是将 max-height 和 overflow: auto 添加到 class .collapsing 并且我已经将“collapsing”添加到手风琴的 classes 但随后手风琴滚动到高度，一秒钟后跳到完全展开。在 node_modules bootstrap 文件夹中，我查看了 _accordion.scss 并将“溢出锚点”更改为自动，但没有任何改变。

.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: "Whosebugquestion",
};
</script>

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

有什么想法吗？谢谢

Answer 1

找到了！您必须将 class 放在手风琴体中。所以首先定义一个class like

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

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

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

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

restrict height of collapsed accordion segment Bootstrap 5 Vue3

sass

vue.js

bootstrap-5