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

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

Answer 4

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

检查一下：

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

Answer 5

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

Answer 6

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

<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
<div class="fixed-top">...</div>
<div class="fixed-bottom">...</div>
<div class="sticky-top">...</div>

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

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

6 个答案: