将div对准Bootstrap4卡体的底部

时间：2019-05-03 20:08:03

标签： javascript html css bootstrap-4

我正在使用引导卡。我有页眉和页脚，并且它们工作正常。在卡体内，我有一个卡标题。该标题在卡体内可占用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>

1 个答案:

答案 0 :(得分：1)

我做了几件事：

  • 在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>

相关问题
最新问题