卡体

卡体

关注
发信
关注(28)粉丝(399)

javascript - 将div对准Bootstrap4卡体的底部

我正在使用引导卡。我有页眉和页脚，并且它们工作正常。在卡体内，我有一个卡标题。该标题在卡体内可占用1或2行。同样在此卡体内，我在div中有一些信息。我想将此信息div对齐到卡体底部，因为我使用行/列很好地对齐了内容，但是当您在页面中翻阅各个卡时，因为1张卡纸标题为1行，另一张卡纸标题为2行，所以此附加信息不会完全在卡之间对齐并进行底部对齐可以解决这个问题。

因此，基本上，我希望橘红色的div在其卡片的底部对齐，因为然后在视觉上看它们看起来会在卡片上对齐。



<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<style>
  .box {
    position: relative;
    display: inline-block;
    width: 340px;
    height: 300px;
    background-color: #fff;
    border-radius: 5px;
  }

  .box:hover {
    /*-webkit-transform: scale(1.10, 1.10);
    transform: scale(1.10, 1.10);*/
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
  }
</style>

<div class="container" style="margin-top: 25px;">
  <div class="row">
    <div class="col">

      <div class="box" style="margin-right: 30px; margin-bottom: 30px;">
        <div class="card" style="width: 100%; height: 100%;">

          <!-- CARD HEADER -->
          <div class="card-header" style="margin: 0px;">
Header Stuff
          </div>

          <!-- CARD BODY -->
          <div class="card-body" style="cursor: pointer;">
            <div class="row">
              <div class="col">
                <h6 class="card-title">This is a 1 line title</h6>
              </div>
            </div>

            <!--<div class="d-flex align-items-center">-->
            <div class="container" style="background-color: orangered">
              <div class="row">
                <div class="col-4">
                  Starts On:
                </div>
                <div class="col">
                  1/1/2019
                </div>
              </div>
              <div class="row">
                <div class="col-4">
                  Ends On:
                </div>
                <div class="col">
                  12/31/2019
                </div>
              </div>
              <div class="row">
                <div class="col-4">
                  #:
                </div>
                <div class="col">
                  52
                </div>
              </div>
            </div>
            <!--</div>-->
          </div>

          <!-- CARD FOOTER -->
          <div class="card-footer">
Footer stuff
          </div>

        </div>
      </div>

      <div class="box" style="margin-right: 30px; margin-bottom: 30px;">
        <div class="card" style="width: 100%; height: 100%;">

          <!-- CARD HEADER -->
          <div class="card-header" style="margin: 0px;">
            Header stuff
          </div>

          <!-- CARD BODY -->
          <div class="card-body" style="cursor: pointer;">
            <div class="row">
              <div class="col">
                <h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6>
              </div>
            </div>

            <!--<div class="d-flex align-items-center">-->
            <div class="container" style="background-color: orangered">
              <div class="row">
                <div class="col-4">
                  Starts On:
                </div>
                <div class="col">
                  1/1/2020
                </div>
              </div>
              <div class="row">
                <div class="col-4">
                  Ends On:
                </div>
                <div class="col">
                  12/31/2020
                </div>
              </div>
              <div class="row">
                <div class="col-4">
                  #:
                </div>
                <div class="col">
                  10
                </div>
              </div>
            </div>
            <!--</div>-->
          </div>

          <!-- CARD FOOTER -->
          <div class="card-footer">
Footer stuff here
          </div>

        </div>
      </div>

    </div>
  </div>
</div>

最佳答案

我做了几件事：


添加position:absolute与底部之间的间隙为（24％）；
container类实现了100％的宽度，这就是为什么盒子现在超出边界的原因；
card-body类实现了20px的填充
为了获得准确的样式，我们从100％的宽度（从Cowntainer）中删除了20px的宽度


完整的摘要如下：



.box {
  position: relative;
  display: inline-block;
  width: 340px;
  height: 300px;
  background-color: #fff;
  border-radius: 5px;
}

.box:hover {
  /*-webkit-transform: scale(1.10, 1.10);
    transform: scale(1.10, 1.10);*/
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}

.orangeRedClass {
  position: absolute;
  bottom: 24%;
  width: calc(100% - 40px) !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />


<div class="container" style="margin-top: 25px;">
  <div class="row">
    <div class="col">

      <div class="box" style="margin-right: 30px; margin-bottom: 30px;">
        <div class="card" style="width: 100%; height: 100%;">

          <!-- CARD HEADER -->
          <div class="card-header" style="margin: 0px;">
            Header Stuff
          </div>

          <!-- CARD BODY -->
          <div class="card-body" style="cursor: pointer;">
            <div class="row">
              <div class="col">
                <h6 class="card-title">This is a 1 line title</h6>
              </div>
            </div>

            <!--<div class="d-flex align-items-center">-->
            <div class="container orangeRedClass" style="background-color: orangered">
              <div class="row">
                <div class="col-4">
                  Starts On:
                </div>
                <div class="col">
                  1/1/2019
                </div>
              </div>
              <div class="row">
                <div class="col-4">
                  Ends On:
                </div>
                <div class="col">
                  12/31/2019
                </div>
              </div>
              <div class="row">
                <div class="col-4">
                  #:
                </div>
                <div class="col">
                  52
                </div>
              </div>
            </div>
            <!--</div>-->
          </div>

          <!-- CARD FOOTER -->
          <div class="card-footer">
            Footer stuff
          </div>

        </div>
      </div>

      <div class="box" style="margin-right: 30px; margin-bottom: 30px;">
        <div class="card" style="width: 100%; height: 100%;">

          <!-- CARD HEADER -->
          <div class="card-header" style="margin: 0px;">
            Header stuff
          </div>

          <!-- CARD BODY -->
          <div class="card-body" style="cursor: pointer;">
            <div class="row">
              <div class="col">
                <h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6>
              </div>
            </div>

            <!--<div class="d-flex align-items-center">-->
            <div class="container orangeRedClass" style="background-color: orangered">
              <div class="row">
                <div class="col-4">
                  Starts On:
                </div>
                <div class="col">
                  1/1/2020
                </div>
              </div>
              <div class="row">
                <div class="col-4">
                  Ends On:
                </div>
                <div class="col">
                  12/31/2020
                </div>
              </div>
              <div class="row">
                <div class="col-4">
                  #:
                </div>
                <div class="col">
                  10
                </div>
              </div>
            </div>
            <!--</div>-->
          </div>

          <!-- CARD FOOTER -->
          <div class="card-footer">
            Footer stuff here
          </div>

        </div>
      </div>

    </div>
  </div>
</div>

关于javascript - 将div对准Bootstrap4卡体的底部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55976464/

10-09 19:57
Powered by LMLPHP ©2024 卡体 0.044353