html - Font Awesome 和 Bootstrap alert spacing 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