如何实现Bootstrap同一行中div的单独展开与折叠？

我英语不太好，抱歉！我正在用Bootstrap制作着陆页，服务板块包含4个div，每个div内都设有折叠按钮，但点击任意一个按钮时，所有div都会扩展至相同高度，我希望仅选中的div展开，能否提供帮助？

原代码 #

<section id="services" class="services section-bg">
     <div class="container" data-aos="fade-up">
     <div class="row">
        <div class="col-xl-3 col-md-6 d-flex align-items-stretch mt-4 mt-xl-0 ejemplo1" data-aos="zoom-in" data-aos-delay="100">
          <div class="icon-box">
            <div class="icon"><i class="bx bxl-dribbble"></i></div>
            <h4>Lorem Ipsum</h4>
            <p>Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi
            </p>
            <br>
            <div class="divbotonvermas">
              <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample1"
                aria-expanded="false" aria-controls="collapseExample1">
                Ver Más
              </button>
            </div>
            <div class="collapse" id="collapseExample1">
              <div class="card card-body">
                Some placeholder content for the collapse component. This panel is hidden by default but revealed when
                the user activates the relevant trigger.
              </div>
            </div>
          </div>
        </div>
        

        <div class="col-xl-3 col-md-6 d-flex align-items-stretch mt-4 mt-md-0 ejemplo2" data-aos="zoom-in" data-aos-delay="200">
          <div class="icon-box">
            <div class="icon"><i class="bx bx-file"></i></div>
            <h4><a href="">Sed ut perspici</a></h4>
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</p>
            <br>
            <div class="divbotonvermas">
              <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample2"
                aria-expanded="false" aria-controls="collapseExample2">
                Ver Más
              </button>
            </div>
            <div class="collapse" id="collapseExample2">
              <div class="card card-body">
                Some placeholder content for the collapse component. This panel is hidden by default but revealed when
                the user activates the relevant trigger.
              </div>
            </div>
          </div>
        </div>

        <div class="col-xl-3 col-md-6 d-flex align-items-stretch mt-4 mt-xl-0 ejemplo3" data-aos="zoom-in" data-aos-delay="300">
          <div class="icon-box">
            <div class="icon"><i class="bx bx-tachometer"></i></div>
            <h4><a href="">Magni Dolores</a></h4>
            <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</p>
            <br>
            <div class="divbotonvermas">
              <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample3"
                aria-expanded="false" aria-controls="collapseExample3">
                Ver Más
              </button>
            </div>
            <div class="collapse" id="collapseExample3">
              <div class="card card-body">
                Some placeholder content for the collapse component. This panel is hidden by default but revealed when
                the user activates the relevant trigger.
              </div>
            </div>
          </div>
        </div>

        <div class="col-xl-3 col-md-6 d-flex align-items-stretch mt-4 mt-xl-0 ejemplo4" data-aos="zoom-in" data-aos-delay="400">
          <div class="icon-box">
            <div class="icon"><i class="bx bx-layer"></i></div>
            <h4><a href="">Nemo Enim</a></h4>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</p>
            <br>
            <div class="divbotonvermas">
              <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample4"
                aria-expanded="false" aria-controls="collapseExample4">
                Ver Más
              </button>
            </div>
            <div class="collapse" id="collapseExample4">
              <div class="card card-body">
                Some placeholder content for the collapse component. This panel is hidden by default but revealed when
                the user activates the relevant trigger.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</section>

问题出在你给每个列添加的align-items-stretch类上——Bootstrap的这个类会强制flex容器内的所有子元素拉伸至相同高度，所以哪怕只有一个div展开，其他列也会被同步拉到相同高度。

只需要把每个列中的align-items-stretch替换为align-items-start，或者直接移除这个类，就能让每个列的高度根据自身内容自适应：

修改后的代码示例（以第一个列为例） #

<div class="col-xl-3 col-md-6 d-flex align-items-start mt-4 mt-xl-0 ejemplo1" data-aos="zoom-in" data-aos-delay="100">
  <!-- 内部内容保持不变 -->
</div>

对所有四个列做同样的修改后，点击折叠按钮时，只有被选中的div会展开，其他列会保持原有高度，不会被强制拉伸。

内容的提问来源于stack exchange，提问作者Gerónimo Martín Muzzopappa