我正在尝试将一个 glyphicon 放在警报框的左侧。当警报文本超过一行时,我希望新一行的文本从第一行文本的开头开始,而不是在 glyphicon 下面。
如果我为图标和消息使用 div,图标会位于消息上方。如果我使用 span,消息会跟随图标并换行。
假设 glyphicon 的宽度未知,因此使用 ::first-line
选择器不可行,除非有比我更聪明的方法。我也不想把 glyphicon 放在 .col-*
中,因为 .col-*-1
太大了。无论我是使用 div 还是 span 用于 glyphicon 和消息,.pull-left
和 .pull-right
都没有产生效果。
最简单的解决方案是使用表格(吸气!),但是我正在努力避免这样做。
我还在考虑是否将图标放在警报的左上角或中间左侧。即使使用表格,我也很难垂直居中图标。
我已经有了一个相当简单的代码:
<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
有什么想法吗?
display: table-cell
,你可以设置vertical-align: middle
也能奏效。谢谢! - Ernesto