頁面頂部固定浮動 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

如果您想要固定在頂部的警報並且您正在使用引導導航欄 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 演示

Answer 5

其他人建議使用包裝div但您應該能夠在不增加 html 復雜性的情況下執行此操作...

看一下這個：

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

Answer 6

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