Question

我有可爱的卡片，有一个很好的投影。我没有使用bootstrap4卡样式。

这是卡片样式：

.feature-card {
  box-shadow: 0 13px 34px 0 rgba(75, 111, 255, 0.09);
  background: #fff;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 4rem 1.5rem 3rem 1.5rem;
  min-height: 26rem;
  display: block;
  position: relative;
  text-align: left;
  text-decoration: none !important;
  -webkit-transition: box-shadow ease 0.3s;
  -o-transition: box-shadow ease 0.3s;
  transition: box-shadow ease 0.3s;
}
.feature-card:hover {
  box-shadow: 5px 5px 35px 10px rgba(75, 111, 255, 0.09);
}
.feature-card h3 {
  color: #32404E;
  font-weight: 600;
  font-size: 1.6rem;
  margin-top: 3rem;
}

.feature-card p {
  color: #878baa;
  margin-top: 1.5rem;
  font-size: 1.5rem;
  line-height: 2.3rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />


<div class="row">
  <div class="col-md-6">
    <a href="#" class="feature-card">
      <h3>Title</h3>
      <p>Desc/</p>
      <span style="color:#4a8bfc;" class="bolder">Last Line</span>
    </a>
  </div>
</div>

我想要做的是在这张卡片上加一个页脚。我希望它是100％的宽度，我似乎无法实现这一点......我可能会错过一些非常简单的东西，但它正在逃避我。

我试过了：

将此添加到html：

  <div class="feature-card-footer">
                    <span href="#">Footer</span>
                </div>

用这个css：

  .feature-card-footer {
    padding: .75rem 1.25rem;
    background-color: #f7f7f9;
    border-top: 1px solid rgba(0,0,0,0.125); 
    min-width:100%;

  }

我也试过改变位置。但是页脚不会左右对齐，也不会位于卡片的底部。我错过了什么？

Answer 1

使.feature-card成为灵活容器。
将卡片HTML分隔为card-body和card-footer
使用margin-top: auto将页脚推到底部
将卡片的padding移至卡片正文 - 这意味着它不会影响页脚
将box-sizing规则添加到页脚 - 默认情况下，此处似乎没有包含Bootstrap

fiddle

.feature-card {
  box-shadow: 0 13px 34px 0 rgba(75, 111, 255, 0.09);
  background: #fff;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-border-radius: 5px;
  min-height: 26rem;
  /* add flexbox rules */
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: left;
  text-decoration: none !important;
  -webkit-transition: box-shadow ease 0.3s;
  -o-transition: box-shadow ease 0.3s;
  transition: box-shadow ease 0.3s;
}

.feature-card:hover {
  box-shadow: 5px 5px 35px 10px rgba(75, 111, 255, 0.09);
}

.feature-card-body {
  /* move the padding to the card-body */
  padding: 4rem 1.5rem 3rem 1.5rem;
}

.feature-card h3 {
  color: #32404E;
  font-weight: 600;
  font-size: 1.6rem;
  margin-top: 3rem;
}

.feature-card p {
  color: #878baa;
  margin-top: 1.5rem;
  font-size: 1.5rem;
  line-height: 2.3rem;
}

.feature-card-footer {
  padding: .75rem 1.25rem;
  background-color: #f7f7f9;
  border-top: 1px solid rgba(0, 0, 0, 0.125);
  min-width: 100%;
  /* push footer to bottom */
  margin-top: auto;
  /* ensure width includes padding */
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />


<div class="container">
  <div class="row">
    <div class="col-md-6">
      <a href="#" class="feature-card">
        <div class="feature-card-body">
          <h3>Title</h3>
          <p>Desc/</p>
          <span style="color:#4a8bfc;" class="bolder">Last Line</span>
        </div>
        <div class="feature-card-footer">
          <span href="#">Footer</span>
        </div>
      </a>
    </div>
  </div>
</div>

添加页脚到卡

1 个答案: