页面顶部固定浮动 div 中的引导警报

Posted 2023-03-05

【中文标题】页面顶部固定浮动 div 中的引导警报

【英文标题】：Bootstrap alert in a fixed floating div at the top of page

【发布时间】：2014-08-03 21:54:15

【问题描述】：

我有一个使用 Bootstrap 的 Web 应用程序（2.3.2 - 公司政策，如果没有对多个 Web 应用程序进行大量测试，我们无法升级到 3.0）。我们在这个应用程序中有几个长页面需要验证表单和表格 - 但是由于实际和美观的原因，我们需要在页面顶部以浮动 div 的形式显示警报消息。

这将是一个固定的浮动 div，可以在需要时使用 javascript 显示和隐藏。这部分工作，我可以控制这个 div，每当我需要向用户显示一些信息或发生一些错误时。

布局是这样的：

<div id="message">
    <div id="inner-message" class="alert alert-error">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        test error message
    </div>
</div>

样式如下：

#message 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

#inner-message 
    margin: 0 auto;

#message div 表现得很好，但是当我尝试向 #message div 添加一些填充（尝试在页面边缘和 div 之间获得一些空间，即填充：5px）时，div仅在左侧和顶部获得填充，并且 div 的其余部分被推到页面右侧太远（隐藏引导警报内的“x”的一部分）。

以前有人经历过吗？这似乎是一个很简单的问题，所以我忽略了什么吗？

【问题讨论】：

尝试了@Dan，但是当我向该 div 添加边距时，行为相同，它在顶部和左侧获得边距 - 将 div 的其余部分从右手推出几个像素页面的一侧。它现在是一个内部 div，所以我可以向外部 div 添加填充，但仍然表现相同。

我删除了我的评论 b/c 我意识到当我开始更多地查看它时

使用Bootstrap提供的class="fixed-top"

【参考方案1】：

我认为问题在于您需要将 div 包装在容器和/或行中。

这应该与您正在寻找的外观相似：

<div class="container">
    <div class="row" id="error-container">
         <div class="span12">  
             <div class="alert alert-error">
                <button type="button" class="close" data-dismiss="alert">×</button>
                 test error message
             </div>
         </div>
    </div>
</div>

CSS：

#error-container 
     margin-top:10px;
     position: fixed;

Bootply demo

【讨论】：

我刚刚尝试了您的代码，对 css 进行了一些更改。位置：固定；边距：10px；宽度：100%； - 同样的问题。

我更新了...现在试试，我认为您不需要在此处添加任何填充。

试图通过引导样式和最小的 css 更改使其保持原生，但我同意 :)

【参考方案2】：

只需将您的内部消息包装在您应用填充的 div 中：http://jsfiddle.net/Ez9C4/

<div id="message">
    <div style="padding: 5px;">
        <div id="inner-message" class="alert alert-error">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            test error message
        </div>
    </div>
</div>

【讨论】：

我应该添加 z-index: 999; 以便在任何元素前面设置警报。

他们在 Bootstrap 3 中将“alert-error”更改为“alert-danger”。

【参考方案3】：

其他人建议包装 div 但您应该能够做到这一点而不会增加 html 的复杂性...

看看这个：

#message 
  box-sizing: border-box;
  padding: 8px;

【讨论】：

当位置：为#message 固定时，这是否有效？我似乎无法让它工作，我需要让消息 div 始终浮动在页面顶部，因为用户可能已经向下滚动了页面。

@Husman 为我工作bootply.com/4pj9zm88a8 你在哪个浏览器上？

【参考方案4】：

如果您想要一个固定在顶部的警报并且您正在使用引导导航栏 navbar-fixed-top，则以下样式类将在导航顶部覆盖它们警报：

.alert-fixed 
    position:fixed; 
    top: 0px; 
    left: 0px; 
    width: 100%;
    z-index:9999; 
    border-radius:0px

即使用户在页面中向下滚动，我也能很好地提供警报。

【讨论】：

当用户滚动到页面顶部时，有没有办法使用它但不覆盖固定的导航栏？

我使用了你的例子，但我无法点击我的导航栏，这也是固定的。 @Harry 你解决了吗？

@AlexVentura 我认为我最终没有这样做，我不得不在将其固定在滚动条上或将其固定在导航栏上方但不固定之间做出选择，所以我选择了后者。不过考虑一下，必须有一种 JS 方式来添加，例如a margin-top 警报开启时对身体的警报高度。如果我有机会尝试一下，我会尽快回复您。

谢谢@Harry 你提到我已经解决了这个问题我使用了margin-top 值等于我的导航栏高度。现在它就像一个魅力，无论是我的固定导航栏和我的固定警报。

【参考方案5】：

你可以使用这个类：class="sticky-top alert alert-dismissible"

【参考方案6】：

最简单的方法是使用 Bootstrap 提供的任何这些类实用程序：

引导程序 5

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

https://getbootstrap.com/docs/5.0/utilities/position/

引导程序 4

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

<!-- Deprecated classnames -->
<div class="fixed-top">...</div>
<div class="fixed-bottom">...</div>
<div class="sticky-top">...</div>

https://getbootstrap.com/docs/4.0/utilities/position