我有一个使用 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">×</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 警报中)。
有没有人遇到过这种情况?这似乎是一个足够简单的问题,所以我是否忽略了什么?
最佳答案
如果你想要一个固定在顶部的警报并且你正在使用 Bootstrap 导航栏 navbar-fixed-top 下面的样式类将覆盖它们在导航顶部的警报:
.alert-fixed {
position:fixed;
top: 0px;
left: 0px;
width: 100%;
z-index:9999;
border-radius:0px
}
即使当用户在页面中向下滚动时,这对我来说也能很好地提供提醒。
关于javascript - 页面顶部固定 float div 中的 Bootstrap 警报,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24203617/