如何在底部有一个固定的div并带有边距来显示信息？

Question

我有一个“经典”html5 页面，由页眉、几个部分和页脚组成：

<html>

<header>
...
</header>

<section>
...
</section>

<section>
...
</section>

<footer>
...
</footer>

</html>

我需要创建一个 div，它将显示信息（例如服务器响应），固定在右下角几秒钟，并带有一些边距，如下图所示：

为此，我为该容器创建了以下 HTML + CSS，并将其插入到 HTML 底部：

html

：

<div id="divInfoContainer" class="divInfoContainer divInfoContainerNoErrors">
    <div id="divInfoAnimated" class="divInfoAnimated">
        <img src="~/Content/loading.gif" alt="Loading..." />
    </div>
    <div id="divInfoText" class="divInfoText">
    </div>
</div>

css

：

.divInfoContainer {
    position: fixed;
    bottom: 60px;
    right: 30px;
    width: auto;
    padding: 15px;
    border-radius: 10px;
    font-weight: bold;
    visibility: hidden;
}

.divInfoContainerInfo {
    background-color: #2E64FE;
    color: #ffffff;
}

.divInfoContainerErrors {
    background-color: #FF0000;
    color: #ffffff;
}

.divInfoContainerSuccess {
    background-color: #0B610B;
    color: #ffffff;
}

它工作得很好，正如所附的屏幕截图所示，但问题是它的响应速度不是很好，因为在平板电脑中它失去了右边距，正如在第二个附件中看到的那样。

事实是我不仅想解决右边距问题，而且还想使用 Bootstrap 5 创建一个完全响应式的解决方案，它总是创建一个独立于屏幕且具有相同底部/右边距的固定 div，但目前，经过多次尝试，我无法实现这一目标。

接下来我可以尝试什么？

Answer 1

在撰写问题时，我完全忘记了 Bootstrap 中已经存在 toast，因此，正如 @SubCore 建议的那样，我已经阅读了文档并实现了 toast，完全没有问题。

如何在底部有一个固定的div并带有边距来显示信息？

问题描述投票：0回答：1

1个回答

最新问题

如何在底部有一个固定的div并带有边距来显示信息？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1