在卡中添加折叠页脚(引导程序)

问题描述 投票:0回答:1

我做了三个块–在引导程序中使用CARD类。效果很好。现在,我想向卡中添加页脚(或只是一个div),以允许“显示/隐藏详细信息”。

我尝试了10种不同的方式,并且由于某些原因,卡总是“破损”。我有适用于卡片的代码,但没有崩溃

目标是使最后3行崩溃,而“显示付款时间表”更改为“隐藏付款时间表”。

谁知道如何到达那里?在不破坏卡的情况下将div类折叠到哪里?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<!-- Wrapper for Cards -->
<div class="row mx-n2">
    <div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">

      <!-- Card 1 -->
      <a class="card h-100 transition-3d-hover" href="#">
        <img class="card-img-top" src="../../assets/img/480x220/monthly.gif" alt="Monthly Animation">
        <div class="card-body">
          <h4>Monthly</h4>
          <p class="font-size-1 text-body mb-0">You will be charged every month the amount of</p>
          <h3 class="text-center font-weight-bold text-black-50 mb-0 mt-4">USD 43</h3>
        </div>
            <hr/>
        <!-- Collapsing Footer -->
        <div class="card-footer border-0 pt-0">
            <span class="font-size-1 text-black-50">Show payment schedule</span>
            <div class="row pt-2">
                <div class="col">
                    <span class="today font-size-1 text-black-50" data-toggle="tooltip" data-html="true" id="today">Today</span>
                </div>
                <div class="col">
                    <span class="font-size-1 text-black-50">USD 43</span>
                </div>
            </div>
            <div class="row">
                <div class="col">
                <span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">June 2020</span>
                </div>
                <div class="col">
                <span class="font-size-1 text-black-50">USD 43</span>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">July 2020</span>
                </div>
                <div class="col">
                    <span class="font-size-1 text-black-50">USD 43</span>
                </div>
            </div>
        </div>
        <!-- End Collapsing Footer -->
      </a>
      <!-- End Card 1 -->

    </div>
    <div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">

      <!-- Card 2 -->
      <a class="card h-100 transition-3d-hover" href="#">
        <img class="card-img-top" src="../../assets/img/480x220/quarterly.gif" alt="Quarterly Animation">
        <div class="card-body">
          <h4>Quarterly</h4>
          <p class="font-size-1 text-body mb-0">You will be charged every third month the amount of</p>
          <h3 class="text-center font-weight-bold text-black-50 mb-0 mt-4">USD 102</h3>
        </div>
            <hr/>
        <!-- Collapsing Footer -->
        <div class="card-footer border-0 pt-0">
          <span class="font-size-1 text-black-50 ">Show payment schedule</span>
           <div class="row pt-2">
            <div class="col">
               <span class="today font-size-1 text-black-50" data-toggle="tooltip" data-html="true" id="today">Today</span>
            </div>
            <div class="col">
                <span class="font-size-1 text-black-50">USD 102</span>
            </div>
          </div>

          <div class="row">
            <div class="col">
               <span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">July 2020</span>
            </div>
            <div class="col">
              <span class="font-size-1 text-black-50">July 2020</span>
            </div>
          </div>
                <div class="row">
                <div class="col">
                    <span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">July 2020</span>
                </div>
                <div class="col">
                    <span class="font-size-1 text-black-50">USD 43</span>
                </div>
            </div>
        </div>
        <!-- End Collapsing Footer -->
      </a>
      <!-- End Card 2 -->
    </div>
    <div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">
      <!-- End Card 3 -->
      <a class="card h-100 transition-3d-hover" href="#">
        <img class="card-img-top" src="../../assets/img/480x220/yearly.gif" alt="Yearly Animation">
        <div class="card-body">
          <h4>Annually</h4>
          <p class="font-size-1 text-body mb-0">You will be charged once every year the amount of</p>
          <h3 class="text-center font-weight-bold text-black-50 mb-0 mt-4">USD 408</h3>
        </div>
            <hr/>
        <!-- Collapsing Footer -->
        <div class="card-footer border-0 pt-0">
        <span class="font-size-1 text-black-50">Show payment schedule</span>
          <div class="row pt-2">
            <div class="col">
            <span class="today font-size-1 text-black-50" data-toggle="tooltip" data-html="true" id="today">Today</span>            </div>
            <div class="col">
            <span class="font-size-1 text-black-50">USD 408</span>
            </div>
          </div>
            <div class="row">
                <div class="col">
                    <span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">April 2021</span>
                </div>
                <div class="col">
                    <span class="font-size-1 text-black-50">USD 408</span>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">April 2022</span>
                </div>
                <div class="col">
                    <span class="font-size-1 text-black-50">USD 408</span>
                </div>
            </div>
        </div>
        <!-- End Collapsing Footer -->
      </a>
      <!-- End Card 3 -->
    </div>
  </div>
<!-- End Wrapper for Cards -->

Visual reference

twitter-bootstrap bootstrap-4 collapse bootstrap-accordion
1个回答
0
投票

喜欢吗?有关更多信息,请访问https://getbootstrap.com/docs/4.4/components/collapse/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="row mx-n2">
  <div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">
    <!-- End Card 3 -->
    <a class="card h-100 transition-3d-hover" href="#">
      <img class="card-img-top" src="../../assets/img/480x220/yearly.gif" alt="Yearly Animation">
      <div class="card-body">
        <h4>Annually</h4>
        <p class="font-size-1 text-body mb-0">You will be charged once every year the amount of</p>
        <h3 class="text-center font-weight-bold text-black-50 mb-0 mt-4">USD 408</h3>
      </div>
      <hr/>
      <!-- Collapsing Footer -->
      <div class="card-footer border-0 pt-0">
        <span class="font-size-1 text-black-50" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Show payment schedule</span>
        <div class="collapse show" id="collapseExample">
          <div class="row pt-2">
            <div class="col">
              <span class="today font-size-1 text-black-50" data-toggle="tooltip" data-html="true" id="today">Today</span> </div>
            <div class="col">
              <span class="font-size-1 text-black-50">USD 408</span>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">April 2021</span>
            </div>
            <div class="col">
              <span class="font-size-1 text-black-50">USD 408</span>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">April 2022</span>
            </div>
            <div class="col">
              <span class="font-size-1 text-black-50">USD 408</span>
            </div>
          </div>
        </div>
      </div>
      <!-- End Collapsing Footer -->
    </a>
    <!-- End Card 3 -->
  </div>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.