web-dev-qa-db-ja.com

bootstrapページ上部の固定フローティングdivのアラート

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の左側と上部が残り、ページの右側に押し出されすぎています（bootstrapアラート内の 'x'の一部を非表示にします）。

誰もこれを経験したことがありますか？それは単純な問題のように思えるので、私は何かを見落としていますか？

javascripthtmlcsstwitter-bootstrap
39
Husman

パディングを適用する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>
33
dpellier

上部に固定されたアラートが必要で、bootstrap navbar navbar-fixed-topを使用している場合、次のスタイルクラスはアラートをナビゲーションの上にオーバーレイします。

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

これは、ユーザーがページ内で下にスクロールされた場合でもアラートを提供するのに役立ちました。

42
Derek

問題は、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

5
Dan

他の人はラッピングdivを提案していますが、htmlに複雑さを加えることなくこれを行うことができるはずです...

これをチェックしてください：

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

最も簡単なアプローチは、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

3
tfmontague

このクラスを使用できます：class="sticky-top alert alert-dismissible"

2
ibrahim konuk