Значок слева от оповещения Bootstrap

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

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

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

Самое простое решение - использовать таблицу (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

Любые идеи?

источник

2014-11-12 dfoverdx

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

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

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

See Updated Fiddle

источник

2014-11-12 23:10:12 ochi

Awesome! Это будет сделано. Я буду отмечать как ответ, как только это позволит мне. – dfoverdx

рад, что я мог бы помочь, спасибо! – ochi

Отличный ответ. Еще один вопрос: что, если я хотел бы центрировать значок по вертикали? – Ernesto

Другим способом было бы расположить на значке

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

источник

2014-11-12 23:19:53 epascarello

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

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

.alert div{ 
    overflow:hidden; 
}

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

источник

2016-02-20 12:33:05

Значок слева от оповещения Bootstrap

ответ

Смежные вопросы