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

Question

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 an 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 ie 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?

Answer 1

If you want an alert that is fixed to the top and you are using bootstrap navbar navbar-fixed-top the following style class will overlay they alert on top of the nav:

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

This worked well for me to provide alerts even when the user is scrolled down in the page.

Answer 2

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>

Answer 3

The simplest approach would be to use any of these class utilities that Bootstrap provides:

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/

Bootstrap 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

I think the issue is that you need to wrap your div in a container and/or row.

This should achieve a similar look as what you are looking for:

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

Others are suggesting a wrapping div but you should be able to do this without adding complexity to your html...

check this out:

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

Answer 6

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