Symbol auf der linken Seite der Bootstrap-Warnung

Question

Ich versuche, ein Glyphon auf der linken Seite eines Alertdiv. Wenn der Text des Alarms mehr als eine Zeile enthält, möchte ich, dass die neue Zeile an der Stelle beginnt, an der der Text der ersten Zeile gestartet wurde, und nicht unter dem Glyphon.

Wenn ich divs für das Symbol und die Nachricht verwende, befindet sich das Symbol oben auf der Nachricht. Wenn ich Spannen verwende, folgt die Nachricht dem Symbol und wird darunter eingeschlossen.

Angenommen, die Breite des glyphicon nicht vor der Zeit bekannt, so dass der ::first-line Selektor ist nicht durchführbar, ohne etwas klüger als ich ich will nicht auch die glyphicon in einem .col-* weil .col-*-1 setzen ist viel zu groß . .pull-left und .pull-right scheinen keinen Effekt zu haben, egal ob ich ein div oder ein span für das Glyphicon und die Nachricht verwende.

Die einfachste Lösung ist eine Tabelle (le keuch!), Aber ich versuche das zu vermeiden.

Ich bin auch immer noch entscheiden, ob ich das Symbol oben links oder in der Mitte links der Warnung sein soll. Selbst bei einem Tisch hatte ich Probleme, das Symbol vertikal zu zentrieren.

Was ich (ziemlich einfach):

<div class="col-sm-9 col-md-10"> 
    <div class="col-xs-12 alert alert-warning"> 
     <div class="glyphicon glyphicon-exclamation-sign"></div> 
     <div>My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines!</div> 
    </div> 
<div> 

Link zu JSFiddle

Irgendwelche Ideen?

Answer 1

Versuchen, diese zu Ihrem CSS (Sie können sein müssen präziser als diese)

.alert .glyphicon{ 
    display:table-cell; 
} 

.alert div, 
.alert span{ 
    padding-left: 5px; 
    display:table-cell; 
} 

See Updated Fiddle

Answer 2

andere Möglichkeit, das Symbol

HTML zu positionieren wäre:

<div class="lftPad glyphicon glyphicon-exclamation-sign">My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines!</div> 

C SS:

.lftPad { margin-left:25px; } 
.lftPad.glyphicon-exclamation-sign:before{ 
    position: absolute; 
    margin-left: -20px; 
} 

Answer 3

Dies ist eine ziemlich einfache Lösung mit der Überlaufeigenschaft:

.alert .glyphicon{ 
    float:left; 
    margin-right:9px; 
} 

.alert div{ 
    overflow:hidden; 
} 

http://jsfiddle.net/0vzmmn0v/39/