Ikona po lewej stronie ostrzeżenia Bootstrap

Question

Próbuję umieścić glify po lewej stronie elementu alertu div. Gdy tekst alertu ma więcej niż jedną linię, chcę, aby nowa linia zaczynała się od początku tekstu wiersza, a nie pod glifotypem.

Jeśli używam ikon DIV dla ikony i wiadomości, ikona znajduje się na górze wiadomości. Jeśli używam przęseł, wiadomość podąża za ikoną i zawija się pod nią.

Załóżmy szerokość glyphicon nie jest znana z wyprzedzeniem, więc za pomocą przełącznika ::first-line nie jest w stanie przetrwać bez czegoś bardziej sprytny niż I. Ja też nie chcę umieścić glyphicon w .col-* ponieważ .col-*-1 jest zbyt duża . .pull-left i .pull-right nie wydają się mieć żadnego efektu, niezależnie od tego, czy używam diva czy span dla glify i wiadomości.

Najprostszym rozwiązaniem jest użycie tabeli (le gasp!), Ale staram się tego uniknąć.

Nadal decyduję, czy chcę, aby ikona znajdowała się w lewym górnym lub środkowym lewym rogu alertu. Nawet przy stole miałem problem z centrowaniem ikony w pionie.

Co Mam (bardzo prosty):

<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 do JSFiddle

Jakieś pomysły?

Answer 1

warto dodać to do Twojego CSS (konieczne może być bardziej szczegółowe niż to)

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

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

See Updated Fiddle

Answer 2

Innym sposobem byłoby umieścić ikonę

HTML:

<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

Jest to dość proste rozwiązanie za pomocą właściwości overflow:

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

.alert div{ 
    overflow:hidden; 
} 

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