Font Awesome和Bootstrap警报间距q

Question

代码

  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  <div class="alert alert-danger" role="alert">
    <i class="fa fa-exclamation-triangle fa-5x pull-left"></i> <strong>Warning:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus augue eros, elementum sed scelerisque eget, rhoncus in orci. Vivamus ac tellus in lacus consectetur dapibus et sit amet odio. Proin iaculis porttitor nulla ac convallis. Nullam posuere egestas lectus, eu facilisis nulla egestas eu. Phasellus quis sapien elementum, volutpat enim id, suscipit tortor. Nam varius et turpis et dapibus. Donec placerat auctor mauris id mattis.
  </div>

屏幕

问题

我在Bootstrap警报中使用Font Awesome作为上面的代码和屏幕。我希望它能让Font Awesome图标垂直居中，所有文本都在右边，即屏幕上显示的最后两行是右边的上面一行。

有没有办法在Font Awesome中执行此操作，还是应该使用Bootstrap columining来执行此操作？

Answer 1

您可以使用bootstrap列然后垂直对齐它们：

<强> HTML

<div class="alert alert-danger" role="alert">
  <div class="row vertical-align">
    <div class="col-xs-2">
        <i class="fa fa-exclamation-triangle fa-5x"></i> 
    </div>
    <div class="col-xs-10">
        <strong>Warning:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus augue eros, elementum sed scelerisque eget, rhoncus in orci. Vivamus ac tellus in lacus consectetur dapibus et sit amet odio. Proin iaculis porttitor nulla ac convallis. Nullam posuere egestas lectus, eu facilisis nulla egestas eu. Phasellus quis sapien elementum, volutpat enim id, suscipit tortor. Nam varius et turpis et dapibus. Donec placerat auctor mauris id mattis.
    </div>
  </div>
</div>

<强> CSS

.vertical-align {
    display: flex;
    align-items: center;
}

这是一个有效的bootply： http://www.bootply.com/d9RijiwsF0