将页脚中的元素向右对齐答案

【问题标题】：align element in footer to right将页脚中的元素向右对齐
【发布时间】：2021-07-07 08:08:36
【问题描述】：

我有页脚，其中我有带有名称的版权标记和 instagram 链接，我想向右对齐。没有任何工作，你能帮帮我吗？我正在使用引导程序。

<footer class="text-center bg-dark py-3" style="color: white;">
  <span>name &nbsp</span><span style="color:#d64161">©2021 &nbsp</span><a href="https://www.instagram.com/dtd_quiz/" target="_blank"><i style="color: white;" class="fab fa-instagram"> instagram</i></a>
</footer>

【问题讨论】：

从页脚中删除text-center类并添加text-right
这能回答你的问题吗？ Bootstrap 4 align elements right inside a col div

标签： javascript html css

【解决方案1】：

将text-center 更改为text-right

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA==" crossorigin="anonymous" />

<footer class="text-right bg-dark py-3" style="color: white;">
   <span>name &nbsp</span><span style="color:#d64161">©2021 &nbsp</span>
   <a href="https://www.instagram.com/dtd_quiz/" target="_blank">
      <i style="color: white;" class="fab fa-instagram"> instagram</i>
   </a>
</footer>

【讨论】：

【解决方案2】：

有两种方法。

在 footer 元素上使用 text-right 类，
在第一个span 上给出这两个类：d-inline-block 和ml-auto 和d-flex 到footer；

我建议第一个。

如果这没有帮助，请告诉我。

【讨论】：

【解决方案3】：

添加这个 CSS

footer.text-center.bg-dark.py-3 {
    text-align: right !important;
}

【讨论】：

这是不可取的，如果你已经在引导程序中有一个类来做你的事情，为什么要编写自定义 css？
是的，但如果他不知道的话。我也知道有一堂课。他也有这个选择，所以这取决于他。我给了他一个解决方案。