如何在 bootstrap 4 卡的页脚顶部覆盖图标？

Question

我有一个带有页脚的简单 Bootstrap 4 卡片，上面有一些文本和图标。代码如下：

  <div class="card ">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer ">
  <a href="#" class=" "><i style=" font-size: 2.5em;" class="fab fa-facebook "></i></a>
    <span class="float-right" >some text</span>
  </div>
</div>

如果我放置 fa 图标代码，它会扩展页脚。我希望图标简单地覆盖在页脚区域（有点漂浮在上面）而不影响页脚的大小，即页脚的大小保持与未放置图标代码相同。页面上有多个具有相同页脚的卡片。

如何做到这一点？

Answer 1

嗯，从技术上讲，有多种方法可以实现这一目标。

任一图标都需要设置position: absolute 属性。

例如，您也可以在页脚元素 height: 300px 上设置高度。但这可能会移动您的其他内容（不确定这是否是您想要的）。

Answer 2

您可以通过将其父元素设置为position: relative 并将图标元素设置为position: absolute 来从普通元素流中删除您的图标元素。这样，您的图标位置取决于页脚，您可以调整位置，例如top。

如果您有多个图标，您可以调整每个图标的位置，也可以将它们放入容器<div>，然后将其设置为position: absolute，而不是图标。

.card-footer {
  position: relative;
}

.icons {
  position: absolute;
  top: -.35rem;
  font-size: 2.5em;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="card ">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer">
    <div class="icons">
      <a href="#"><i class="fa fa-facebook"></i></a>
      <a href="#"><i class="fa fa-twitter"></i></a>
    </div>
    <span class="float-right">some text</span>
  </div>
</div>