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

Posted 2023-03-06

【中文标题】如何在 bootstrap 4 卡的页脚顶部覆盖图标？

【英文标题】：How to overlay icons on top of footer of bootstrap 4 card?

【发布时间】：2018-09-26 03:51:44

【问题描述】：

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

如何做到这一点？

【问题讨论】：

您可以尝试将图标的位置设置为绝对位置，例如<i class="fas fa-user" style="position: absolute">，但您可能会遇到一些奇怪的行为。不过试试看吧。

【参考方案1】：

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

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

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

【参考方案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>

【讨论】：

有效，但如果我放置其他图标，它们会堆叠在彼此之上，每个都无法读取。

在这种情况下，将所有图标放在绝对定位的容器中。相应地更新了我的 sn-p。