时间戳

首页 > 解决方案 > 单击时如何将折叠按钮移至底部？

jquery - 单击时如何将折叠按钮移至底部？

问题描述

我正在使用引导程序创建一张可以在点击时展开的卡片。为此，我正在使用崩溃。但是当我使用折叠按钮时，按钮保持不动，而我希望它移动到卡片的底部。底部的图片也应该很清楚地说明我正在尝试做什么。

单击折叠时如何向下移动按钮？我必须使用Javascript吗？

感谢您阅读本文

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-2">
      <!-- horizontal spacing -->
  </div>
  <div class="col-8 ">
    <div class="card text">
      <div class="card-header">
        <div class="row">
          <div class="col-3">
            <div class="text-primary"> Name Nameson </div>
          </div>
          <div class="col-6">
            <!-- horizontal spacing -->
          </div>
          <div class="col-3">
            <div class="float-right text-secondary"> Aug 21 2019 </div>
          </div>
        </div>
      </div>
      <div class="card-body">
        <h5 class="card-title">Average Rating (4.5) </h5>
        <p class="card-text">Contrary to popular belief, Lorem Ipsum is not </p>

      </div>
      <div class="card-footer text-muted text-center">
        <a href="#" class="btn" data-toggle="collapse" data-target="#review">
          <div class="row">
          <div> Click to see full review </div>
          </div>
          <span class="oi oi-caret-bottom"></span>
        </a>
        <div class="collapse" id="review">
          Content goes here
        </div>
      </div>
    </div>
  </div>
</div>

崩溃前

崩溃后

标签： jqueryhtmlcsstwitter-bootstrapbootstrap-4

解决方案

collapse将附加内容移动到卡片页脚上方的单个div 中...

https://codeply.com/p/R3QbJnLQDE

         <div class="card text">
                <div class="card-header">
                    <div class="row">
                        <div class="col-3">
                            <div class="text-primary"> Name Nameson </div>
                        </div>
                        <div class="col-6">
                            <!-- horizontal spacing -->
                        </div>
                        <div class="col-3">
                            <div class="float-right text-secondary"> Aug 21 2019 </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <h5 class="card-title">Average Rating (4.5) </h5>
                    <p class="card-text">Contrary to popular belief, Lorem Ipsum is not </p>
                </div>
                <div class="collapse" id="review">
                    <div class="card-body">
                        <h5 class="card-title">More </h5>
                        <p class="card-text">Contrary to popular belief, Lorem Ipsum is not </p>
                    </div>
                    ... (additional content sections here)
                </div>
                <div class="card-footer text-muted text-center">
                    <a href="#" class="btn" data-toggle="collapse" data-target="#review">
                        <div class="row">
                            <div> Click to see full review </div>
                        </div>
                        <span class="oi oi-caret-bottom"></span>
                    </a>
                </div>
         </div>

推荐阅读