代码之家 › 专栏 › 技术社区 › snowflakes74

在bootstrap4callout中添加一个字体很棒的图标

bootstrap-4 css

snowflakes74 · 技术社区 · 5 年前

我试图添加一个图标在左侧的引导4标注,但它是显示以上的H4。

我要放在左边,然后是留言。我也试过了。p:最后一个孩子也是,但没有反映出来。

<div class="callout callout-danger" *ngIf="!isMarked">
   <i class="fal fa-sensor-alert fa-2x mr-2"></i>
   <h4>{{childName }} is currently NOT marked.</h4>
   Mark now.
</div>

标注的ccs如下:

.callout {
  padding: 20px;
  margin: 20px 0;
  border: 1px solid #eee;
  border-left-width: 5px;
  border-radius: 3px;
}

.callout .h4 {
  margin-top: 0;
  margin-bottom: 5px;
  padding-left:20px;
}

.callout .p:last-child {
   margin-bottom: 0;
}

.callout .code {
   border-radius: 3px;
}

.callout .bs-callout {
   margin-top: -5px;
}

.callout-success {
   border-left-color: #5cb85c;
}

.callout-danger {
  border-left-color: #d9534f;
}

1 回复 | 直到 5 年前

HardlyNoticeable 5 年前

编辑:尝试使用网格将图标与h4和body并排放置

<div class="container">
  <div class="row">

    ...

    <div class="col-1"><i class="fal fa-sensor-alert fa-2x mr-2"></i></div>
    <div class="col-11"><h4> {{childName }} is currently NOT marked.</h4>Mark now.</div>

    ...

  </div>  
</div>