在页面顶部的固定浮动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

如果您想要一个固定在顶部的警报并且您正在使用bootstrap navbar 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演示