html - Bootstrap 4 - 自定义警报弹出框

Question

我正在尝试使用 Bootstrap 为警报消息卡进行某些设计。我的想法是使用<div class="card">但我不知道这是否是最好的想法。

这是我想要实现的目标的图片

我的设计是警报的左侧部分具有背景颜色#373C47，中间有一个图标。右侧部分是一些带有标题的文本。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="card depth-5 card-alert-danger">
  <div class="card-body">
    <div class="row">
      <div class="col-md-3">
        <p>Icon background color</p>
      </div>
      <div class="col-md-9">
        <h4 class="card-title m-0">Title</h4>
        <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
      </div>
    </div>

  </div>
</div>

我尝试使用列，但这有点麻烦。我怎样才能实现这个目标？

Answer 1

您正在寻找的内容在 Bootstrap 4 中称为媒体对象。

这是一个与您的图片非常接近的示例，仅使用 native Bootstrap 4 类(单击下面的“运行代码片段”按钮):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
    body {
        background-color: grey;
    }
</style>

<div class="container">
    <div class="row mt-4">
        <div class="col">
            <div class="media bg-warning">
                <i class="fa fa-user-circle align-self-center m-4" style="font-size: 3rem;" aria-hidden="true"></i>
                <div class="media-body bg-light p-4">
                   <div class="row">
                       <div class="col">
                           <h5 class="mt-0">Media object heading</h5>
                       </div>
                       <div class="col-1 text-right">
                           <a href="#">&times;</a>
                       </div>
                   </div>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
                </div>
            </div>
        </div>
    </div>
</div>