Question

我连续拿着一张手风琴和两张卡片（可以是图片或其他任何东西），如这张图片所示：

我使用自举程序中的h-100类来实现连续的所有卡始终具有相同的高度。

但是我无法弄清楚如何使用手风琴。

我添加了一点JQuery，所以我的手风琴总是扩展一张卡，我希望卡体使用尽可能高的高度。

我该如何实现？

<div class="container">
  <div class="row">
    <div class="col d-flex flex-column">
      <div class="accordion accordion-always-open h-100" id="accordionExample">
        <div class="card align-self-stretch">
          <div class="card-header" id="headingOne">
            <h5 class="mb-0">
              <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Collapsible Group Item #1
              </button>
            </h5>
          </div>

          <div id="collapseOne" class="collapse show  align-self-stretch" aria-labelledby="headingOne" data-parent="#accordionExample">
            <div class="card-body h-100">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header" id="headingTwo">
            <h5 class="mb-0">
              <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Collapsible Group Item #2
              </button>
            </h5>
          </div>
          <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
            <div class="card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. 
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header" id="headingThree">
            <h5 class="mb-0">
              <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                Collapsible Group Item #3
              </button>
            </h5>
          </div>
          <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
            <div class="card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col d-flex flex-column">
      <div class="card border-success mb-3 h-100" style="max-width: 18rem;">
        <div class="card-header bg-transparent border-success">Header</div>
        <div class="card-body text-success">
          <h5 class="card-title">Big card</h5>
          <p class="card-text">I want the accordion next to this card to have the same height as this card</p>
          <p class="card-text">I want the accordion next to this card to have the same height as this card</p>
          <p class="card-text">I want the accordion next to this card to have the same height as this card</p>
          <p class="card-text">I want the accordion next to this card to have the same height as this card</p>
        </div>
        <div class="card-footer bg-transparent border-success">Footer</div>
      </div>
    </div>
    <div class="col d-flex flex-column">
      <div class="card border-success mb-3 h-100" style="max-width: 18rem;">
        <div class="card-header bg-transparent border-success">Header</div>
        <div class="card-body text-success">
          <h5 class="card-title">Less content</h5>
          <p class="card-text">This card has same size but has less content</p>
        </div>
        <div class="card-footer bg-transparent border-success">Footer</div>
      </div>
    </div>
  </div>

</div>
  <script>
  $('.accordion-always-open').on('show.bs.collapse', function () {
    $(this).data('isShowing', true);
  });

  $('.accordion-always-open').on('hide.bs.collapse', function (event) {
      if (!$(this).data('isShowing')) {
      event.preventDefault();
    }

    $(this).data('isShowing', false);
  });
  </script>

JsFiddle

Answer 1

您需要更改HTML的结构，但可以通过移除手风琴上的外卡和边框来实现...

<div class="accordion accordion-always-open h-100 d-flex flex-column border rounded" id="accordionExample">
    <div class="card-header flex-shrink-1" id="headingOne">
        <h5 class="mb-0">
              <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Collapsible Group Item #1
              </button>
            </h5>
    </div>
    <div id="collapseOne" class="collapse show flex-grow-1" aria-labelledby="headingOne" data-parent="#accordionExample">
        <div class="card-body h-100 border-bottom">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
        </div>
    </div>
    <div class="card-header flex-shrink-1" id="headingTwo">
        <h5 class="mb-0">
              <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Collapsible Group Item #2
              </button>
            </h5>
    </div>
    <div id="collapseTwo" class="collapse flex-grow-1" aria-labelledby="headingTwo" data-parent="#accordionExample">
        <div class="card-body h-100 border-bottom">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
        </div>
    </div>
    <div class="card-header flex-shrink-1" id="headingThree">
        <h5 class="mb-0">
              <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                Collapsible Group Item #3
              </button>
            </h5>
    </div>
    <div id="collapseThree" class="collapse flex-grow-1" aria-labelledby="headingThree" data-parent="#accordionExample">
        <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
        </div>
    </div>
</div>

https://www.codeply.com/go/YvUrAZKIF0

Bootstrap 4手风琴100％高度（h-100）

1 个答案: