具有展开/折叠内容的引导 4 卡片组 - 希望展开的内容仅影响当前卡片

Question

我有几个反应很好的卡片组。 在每种情况下，我都有展开/折叠内容也很好用。 当我点击展开时，它会展开卡片并显示之前隐藏的内容。 当我点击折叠时，它返回只显示卡片的“标题”内容。

不幸的是，这不是我想要的行为。 最大的问题是，当我展开一张卡片时，该行中的所有其他卡片也会展开。 他们隐藏的内容没有显示，但我得到一个大的空白区域（卡片背景）。

当卡组为static内容时，将后续内容下推。 这不是什么大问题。 但是当内容是动态的（使用 javascript 从 XML 文件创建）时，我必须使用 z-index 来提升到后续内容之上。 在这种情况下，空的扩展卡片部分最终会掩盖它们下面的内容。 我可以忍受它只是当前扩展的卡片，因为它只会掩盖不到 1/4 的内容，但是随着所有卡片的扩展，它几乎涵盖了所有内容。

<div class="container">
  <div class="card-deck">
    <div class="card mb-4">
      <div class="card-body bg-light" id="1">
        <h4 class="card-title">March&nbsp;27, 2020</h4>
        <p>
           <img class="card-img-top" src="images/somephoto.jpeg" alt='some description' />
          <a href="#c1" type="button" data-toggle="collapse" aria-expanded="false" aria-controls="c1">
          <span class="collapsed">more...</span><span class="expanded">...less</span>
          </a>
        </p>
        <div class="collapse" id="c1">
          <p>some content</p>
        </div>
      </div
    </div>
    <div class="card mb-4">
      <div class="card-body bg-light" id="2">
        <h4 class="card-title">August&nbsp;19, 2019</h4>
        <p>
           <img class="card-img-top" src="images/anotherphoto.jpeg" alt='another description' />
          <a href="#c2" type="button" data-toggle="collapse" aria-expanded="false" aria-controls="c2">
          <span class="collapsed">more...</span><span class="expanded">...less</span>
          </a>
        </p>
        <div class="collapse" id="c2">
    ...

任何人都可以建议一种方法让我得到我想要的东西 - 只需扩展一张卡吗？

Answer 1

我相信在多张卡片上协调相同的高度是card-deck class 的一个特点。 尝试使用card-columns class 并查看它是否适用于您的内容。 每列将独立展开，但卡片可能具有不同的高度，具体取决于内容。 这是bootstrap 的 card-columns 组件的文档。

这是一个例子：

    <div class="container">
      <div class="card-columns">
        <div class="card mb-4">
          <div class="card-body bg-light" id="1">
            <h4 class="card-title">March&nbsp;27, 2020</h4>
            <p>
               <img class="card-img-top" src="images/somephoto.jpeg" alt='some description' />
              <a href="#c1" type="button" data-toggle="collapse" aria-expanded="false" aria-controls="c1">
              <span class="collapsed">more...</span><span class="expanded">...less</span>
              </a>
            </p>
            <div class="collapse" id="c1">
              <p>some content</p>
            </div>
          </div>
        </div>
        <div class="card mb-4">
          <div class="card-body bg-light" id="2">
            <h4 class="card-title">August&nbsp;19, 2019</h4>
            <p>
               <img class="card-img-top" src="images/anotherphoto.jpeg" alt='another description' />
              <a href="#c2" type="button" data-toggle="collapse" aria-expanded="false" aria-controls="c2">
              <span class="collapsed">more...</span><span class="expanded">...less</span>
              </a>
            </p>
            <div class="collapse" id="c2">
              <p>More content</p>
            </div>
          </div>
        </div>
      </div>
    </div>

希望有帮助。