Css 引导警报左侧的图标

我正在尝试将glyphicon放在alert div的左侧。当alert的文本超过一行时，我希望新行从第一行文本开始的位置开始，而不是在glyphicon下

如果我对图标和消息使用divs，则图标位于消息顶部。如果使用spans，则消息将跟随图标并在其下换行

假设glyphicon的宽度事先未知，因此如果没有比我更聪明的东西，使用

：：第一行
选择器是不可行的。我也不想将glyphicon放在
.col-*
中，因为
.col-*-1
太大了
.pull left
和
.pull right
似乎没有效果，不管我是使用div还是span作为图标和消息

最简单的解决方法是使用一张桌子（勒加斯普！），但我正试图避免这种情况

我还在决定是要让图标位于警报的左上角还是左中角。即使有一张桌子，我也无法将图标垂直居中

我所拥有的（非常简单）：


我的留言在这里。多行文字！我的留言在这里。多行文字！我的留言在这里。多行文字！我的留言在这里。多行文字！

链接到

有什么想法吗？
尝试将此添加到CSS中（您可能需要比此更具体）

另一种方法是定位图标

HTML:

这是一个使用溢出属性的非常简单的解决方案：

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

.alert div{
    overflow:hidden;
}

现在有了一种更干净的方法（以及更好的最佳实践），可以做到这一点。（由OP更新）

现在几乎所有浏览器都支持FlexBox

另一方面，bootstrap 4不再以本机方式包含glyphicons（尽管没有任何东西阻止您手动包含glyphicons库——或者更常见的是，现在是Fontsome），但它确实以本机方式包含显示类。您可以在没有任何CSS的情况下完成所有这些


引导程序4
我的留言在这里。多行文字！我的留言在这里。多行文字！我的留言在这里。多行文字！我的留言在这里。多行文字！
我的留言在这里。多行文字！我的留言在这里。多行文字！我的留言在这里。多行文字！我的留言在这里。多行文字！

要使图标不垂直居中，只需删除图标“
align self-center
class”。您可能需要使用
mt-*
类来摆弄顶部边距，以便将其与文本对齐<代码>mt-1
在本例中运行良好。
使用引导程序4应该非常简单：

<div class="alert alert-warning">
    <div class="row"> <!-- add no-gutters to make it narrower -->
        <div class="col-auto align-self-start"> <!-- or align-self-center -->
            <div class="glyphicon glyphicon-exclamation-sign"></div>
        </div>
        <div class="col">
            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>


我的留言在这里。多行文字！
我的留言在这里。多行文字！
我的留言在这里。多行文字！
我的留言在这里。多行文字！

无需自定义CSS:）
 回答得很好。还有一个问题：如果我想让图标垂直居中怎么办？嗨@Ernesto，作为另一个问题提问。我试着回答：）@Ernesto，我很快想到了这个。让我知道，如果这是你正在寻找它的工作。我还找到了另一个选择。使用
display:table cell
，您可以设置
vertical align:middle
，它也可以工作。谢谢自从flex-box的出现（以及广泛的支持）以来，这个答案就没有那么重要了，但是我对你的方法的简单性和创造性投了赞成票。对于Bootstrap 4，这应该是正确的选择。它完美地解决了我的问题！我更喜欢将flex属性添加到alert css类中的第一个示例。显示类太冗长了
 <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>

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

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

.alert div{
    overflow:hidden;
}

.alert {
    display: flex;
    flex-direction: row;
}

.alert .glyphicon {
    margin-right: 8px;
    align-self: center; // if you want it centered vertically
}

<div class="alert alert-warning">
    <div class="row"> <!-- add no-gutters to make it narrower -->
        <div class="col-auto align-self-start"> <!-- or align-self-center -->
            <div class="glyphicon glyphicon-exclamation-sign"></div>
        </div>
        <div class="col">
            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>