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>

如何在bootstrap 4卡的页脚顶部叠加图标？

2 个答案: