html – Font Awesome和Bootstrap警报间距q

发布时间：2020-12-14 18:38:48 所属栏目：资源来源：网络整理

导读：码 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 strongWarning:/strong Lorem ipsum dolo

码

<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来执行此操作？

解决方法

您可以使用引导列,然后垂直对齐它们：

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,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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!