javascript - 页面顶部固定 float div 中的 Bootstrap 警报

Question

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

这将是一个固定的 float 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”隐藏在 Bootstrap 警报中)。

有没有人遇到过这种情况？这似乎是一个足够简单的问题，所以我是否忽略了什么？

Answer 1

如果你想要一个固定在顶部的警报并且你正在使用 Bootstrap 导航栏 navbar-fixed-top 下面的样式类将覆盖它们在导航顶部的警报:

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

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