在页面顶部的固定浮动div中引导警报 [英] bootstrap alert in a fixed floating div at the top of page

问题描述

我有一个使用引导程序的Web应用程序（2.3.2 - 公司政策，我们无法通过多个Web应用程序进行大量测试升级到3.0）。我们在这个应用程序中有几个需要验证表单和表格的长页面 - 但是由于实用和美观的原因，我们需要在页面顶部显示一条警告消息，作为浮动div。

这将是一个固定的浮动div，可以在需要时使用javascript显示和隐藏。这部分工作，我可以控制这个div，每当我需要闪烁一些信息给用户或发生一些错误。

布局如下所示：

 < div id =message> 
< div id =inner-messageclass =alert alert-error> 
< button type =buttonclass =closedata-dismiss =alert>& times;< / button> 
测试错误讯息
< / div> 
< / div> 
  

样式如下：

  #message {
 position：fixed; 
 top：0; 
剩下：0; 
宽度：100％; 
} 
＃inner-message {
 margin：0 auto; 
} 
  

#message div的表现非常好，但是当我尝试添加一些填充到#message div（试图获得页面边缘和div之间的一些空格，即padding：5px），div只在左边和顶部获得填充，而div的其余部分被推得太远在页面的右侧（在引导警报中隐藏'x'的一部分）。

有没有人遇到过这种情况？这似乎是一个足够简单的问题，所以我忽略了一些东西？ 解决方案

应用您的填充： http://jsfiddle.net/Ez9C4/

 < div id =message> 
< div style =padding：5px;> 
< div id =inner-messageclass =alert alert-error> 
< button type =buttonclass =closedata-dismiss =alert>& times;< / button> 
测试错误讯息
< / div> 
< / div> 
< / div> 
  

I have a web application which uses bootstrap (2.3.2 - corporate policy, we cannot upgrade to 3.0 without lots of testing across several web applications). We have several long pages within this application that require validation of forms and tables - however due to practical and aesthetic reasons we need to have a alert message appear as a floating div at the top of the page.

This will be a fixed floating div, that can be shown and hidden using javascript as and when needed. This part works and I can control this div, whenever I need to flash some information to the user or some error takes place.

The layout is like so:

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

The styling is below:

#message {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
#inner-message {
    margin: 0 auto;
}

The #message div behaves all well and good, but when I try and add some padding to the #message div (to try and get some space between the edge of the page and the div i.e. padding: 5px), the div only gets padding on the left and top and the rest of the div is pushed out too far to the right of the page (hiding part of the 'x' inside the bootstrap alert).

Has anyone experienced this before? It seems like a simple enough issue, so am I overlooking something?

解决方案

Just wrap your inner message inside a div on which you apply your padding : 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>

这篇关于在页面顶部的固定浮动div中引导警报的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！