Bootstrap-Warnung mit Pseudo vor mit vielen Zeilen ausrichten Nachricht

Question

Ich habe Bootstrap 3 Warnung mit Symbolen. Ich habe eine Symbolschrift verwendet, um die Symbole zu verwalten. Wenn die Länge der Warnmeldung in einer Zeile dargestellt wird, habe ich kein Problem, aber wenn sie eine Zeile überschreitet, habe ich ein Problem mit der Ausrichtung des Symbols. Der folgende Screenshot zeigt die Ausgabe:

Was ich habe müssen, im zweiten Feld, das kastanienbraune Linie sollte beginnt und endet an den horizontalen Grenzen der Box und dem Text geht auf der rechten Seite sein. Mit anderen Worten, wenn die Textzeilen zunehmen, nimmt auch die Höhe des kastanienbraunen Rands zu und die vertikale Ausrichtung des Icons wird in der Mitte beibehalten. Hier

ist die HTML:

<div class="alert alert-warning"> 
     <h4>This property contains system-sensitive properties. Do not use it unless you are well aware of their requirements and results. </h4> 
</div> 

Und hier sind alle CSS-Regeln in Bezug auf `div Alarm:

.alert-warning { 
     padding-left: unset; 
    } 

    .alert { 
     padding: 0 5px; 
    } 

    .alert-warning { 
     background-color: #F8AA5D; 
     border-color: #f7864e; 
     color: #795548; 
    } 

    .alert { 
     border: 1px solid transparent; 
     border-radius: 4px; 
    } 

    .alert, .thumbnail { 
     margin-bottom: 20px; 
    } 
.alert-warning:before { 
    display: inline-block; 
    font-size: 320%; 
    font-family: fox; 
    text-align: center; 
    padding: 0 10px; 
    vertical-align: middle; 
    border-right: 5px solid; 
    margin: 0 10px; 
.alert-warning:before { 
    content: "\e817"; 
    color: #772953; 
    text-shadow: 0 1px 5px rgba(185,74,72,.79); 
} 

Und das ist h4 CSS:

.alert h4, .alert h5 { 
    display: inline-block; 
    padding: 0; 
    margin: 0; 
} 
.alert h4 { 
    color: inherit; 
} 

.alert h4 { 
    margin-top: 15px!important; 
} 

Answer 1

Dies kann nicht was du willst, denn es ist nicht unbedingt 'Bootstrap' ... aber manchmal Frameworks wie Bootstrap (a so groß wie sie sind) können die einfachsten Dinge verkomplizieren.

Was Sie beschrieben haben, ist ein ideales Szenario für die Verwendung von Flexbox. In diesem Beispiel werden keine Bootstrap-Klassen und nur ein paar einfache Flexbox-CSS verwendet. Ihr Rahmen wird mit dem Text wachsen, da er Teil dieses Containers ist. Und da wir flexbox verwenden, können kleine Nachrichten leicht vertikal in der Warnung zentriert werden.

Ich habe ein FontAwesome-Symbol in diesem Beispiel verwendet, weil es einfach war, die Bibliothek einzuschließen. Du könntest das leicht mit deinem Icon austauschen.

2 Beispiele finden Sie im folgenden Abschnitt. Eine kurze Nachricht und eine lange.

.customAlert { 
 
    display: flex; 
 
    align-items: center; 
 
    border: 1px solid #ddd; 
 
    justify-content: center; 
 
    margin-bottom: 12px; 
 
} 
 

 
.customAlertIcon { 
 
    padding: 4px; 
 
    flex-shrink: 1; 
 
} 
 

 
.customAlertMsg { 
 
    padding: 4px; 
 
    border-left: 2px solid #000; 
 
    flex-grow: 1; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="customAlert"> 
 
    <div class="customAlertIcon"> 
 
    <i class="fa fa-warning fa-2x"></i> 
 
    </div> 
 
    <div class="customAlertMsg"> 
 
    This is an alert message. 
 
    </div> 
 
</div> 
 

 
<div class="customAlert"> 
 
    <div class="customAlertIcon"> 
 
    <i class="fa fa-warning fa-2x"></i> 
 
    </div> 
 
    <div class="customAlertMsg"> 
 
    This is a really long alert message. This is a really long alert message. This is a really long alert message. This is a really long alert message. This is a really long alert message. This is a really long alert message. This is a really long alert message. This is a really long alert message. This is a really long alert message. 
 
    </div> 
 
</div>