web-dev-qa-db-de.com

bootstrap-Warnung in einem festen gleitenden Div am oberen Seitenrand

Ich habe eine Webanwendung, die Bootstrap verwendet (2.3.2 - Unternehmensrichtlinie, wir können kein Upgrade auf 3.0 durchführen, wenn nicht mehrere Webanwendungen getestet wurden). Wir haben mehrere lange Seiten in dieser Anwendung, die die Validierung von Formularen und Tabellen erfordern - aus praktischen und ästhetischen Gründen müssen wir jedoch eine Warnmeldung als gleitendes Div am oberen Seitenrand anzeigen lassen.

Hierbei handelt es sich um ein festes gleitendes Div, das bei Bedarf mit Hilfe von Javascript angezeigt und ausgeblendet werden kann. Dieser Teil funktioniert und ich kann dieses div steuern, wann immer ich dem Benutzer Informationen übermitteln muss oder ein Fehler auftritt.

Das Layout ist 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>

Das Styling ist unten:

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

Das #message div verhält sich gut und gut, aber wenn ich versuche, etwas zum #message div hinzuzufügen (um etwas Abstand zwischen dem Rand der Seite und dem div zu bekommen, dh padding: 5px), wird das div nur aufgefüllt links und oben und der Rest des div wird zu weit rechts von der Seite nach außen geschoben (ein Teil des 'x' wird in der Bootstrap-Warnung ausgeblendet).

Hat jemand das schon mal erlebt? Es scheint ein einfaches Problem zu sein, übersieht ich also etwas?

34
Husman

Wickeln Sie einfach Ihre innere Nachricht in ein Div ein, auf das Sie Ihre Polsterung anwenden: 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>
31
dpellier

Wenn Sie einen Alarm haben möchten, der an der Oberseite fixiert ist und Sie Bootstrap Navbar Navbar-Fixed-Top verwenden, wird die folgende Stilklasse über dem Nav angezeigt:

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

Dies funktionierte gut für mich, um Warnungen bereitzustellen, selbst wenn der Benutzer auf der Seite nach unten geblättert wurde.

41
Derek

Ich denke, das Problem ist, dass Sie Ihre div in einen Container und/oder eine Zeile einwickeln müssen. 

Dies sollte ein ähnliches Aussehen wie das, was Sie suchen, erzielen: 

<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

Andere schlagen eine Umhüllung div vor, aber Sie sollten in der Lage sein, dies zu tun, ohne Ihre HTML-Struktur zu erhöhen ...

überprüfen Sie dies heraus:

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

Sie können diese Klasse verwenden: class="sticky-top alert alert-dismissible" 

2
ibrahim konuk

Am einfachsten wäre es, eines dieser Klassen-Dienstprogramme zu verwenden, die Bootstrap bietet:

<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

0
tfmontague