Bootstrap 4 - 我如何正确证明页脚中的某些内容？

Question

注意：引导4。

我有以下页脚（一些不相关的 ASP 内容留在里面）：

<footer class="footer bg-light">
    <span class="footer-copyright">
        &copy; @DateTime.Now.ToLocalTime().Year - @ApplicationResources.CompanyName
    </span>
    <span>
        @ApplicationResources.Versions: @ApplicationResources.Web @appsettings.WebVersion / @ApplicationResources.Api @appsettings.ApiVersion
    </span>
</footer>

版权是左对齐的（如我所愿），但我无法弄清楚如何右对齐版本详细信息（我想要）。如果我制作跨度、div 然后使用“text-right”，它可以工作，但出现在版权下方的行上，使页脚更高（不想要）。 “text-right”对跨度没有影响。

我在网上找不到一个例子。

另一件事。我发现的一些页脚示例在页脚元素上有一个“page-footer”类，而不仅仅是“footer”。如果我这样做了，那么页脚将不再粘在页面底部。

如何在版权所在行右对齐版本信息？

Answer 1

您可以通过在页脚添加 d-flex 和 justify-content-between 类名来使用 flexbox 和 Bootstrap 中的 justify content helpers：

<footer class="footer bg-light d-flex justify-content-between">
    <div class="footer-copyright">
        &copy; @DateTime.Now.ToLocalTime().Year - @ApplicationResources.CompanyName
    </div>
    <div>
        @ApplicationResources.Versions: @ApplicationResources.Web @appsettings.WebVersion / @ApplicationResources.Api @appsettings.ApiVersion
    </div>
</footer>