Значок слева от предупреждения Bootstrap

Я пытаюсь поместить глификон в левую часть предупреждающего div. Когда текст предупреждения содержит более одной строки, я хочу, чтобы новая строка начиналась с начала первого текста строки, а не под глификоном.

Если я использую divs для значка и сообщения, значок находится поверх сообщения. Если я использую промежутки, сообщение следует за значком и обертывается под ним.

Предположим, что ширина глификона не известна заранее, поэтому использование селектора ::first-line не является жизнеспособным, а не чем-то более умным, чем я. Я также не хочу помещать глификон в .col-*, потому что .col-*-1 слишком велика. .pull-left и .pull-right, похоже, не имеют эффекта, независимо от того, использую ли я div или диапазон для глификона и сообщения.

Самое простое решение - использовать таблицу (le gasp!), но я стараюсь избегать этого.

Я также все еще решаю, хочу ли я, чтобы значок находился в верхнем левом или среднем левом углу предупреждения. Даже со столом у меня была проблема с центрированием значка по вертикали.

Что у меня (довольно простое):

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

Ссылка на JSFiddle

Любые идеи?

Ответ 1

Попробуйте добавить это в свой CSS (возможно, вам нужно быть более конкретным, чем это)

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

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

См. Обновленный скрипт

Ответ 2

Это довольно простое решение, использующее свойство переполнения:

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

.alert div{
    overflow:hidden;
}

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

Ответ 3

Другой способ - разместить значок

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>

CSS

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