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

Question

我有一个使用 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”部分）。

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

Answer 1

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

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

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

Answer 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>

Answer 3

最简单的方法是使用 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

Answer 4

我认为问题在于您需要将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 演示

Answer 5

其他人建议使用包装div但您应该能够在不增加 html 复杂性的情况下执行此操作...

看一下这个：

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

Answer 6

您可以使用此类： class="sticky-top alert alert-dismissible"