引导4-自定义警报弹出框

Question

我试着用引导来设计警报信息卡。我的想法是使用<div class="card">，但我不知道这是否是最好的主意。

这是我想要达到的目标的图片

​

​

我的设计是，左边的警报有#373C47的背景颜色#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

您要寻找的是在引导4中的媒体对象。

下面是一个非常接近您的图片的示例，仅使用本机引导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>

​

Answer 2

删除card-body的填充，然后将背景色填充到边框。

​

<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" style="padding:0">
    <div class="row">
      <div class="col-md-3" style="background:#373C47">
        <p style="color:white">Icon background color</p>
      </div>
      <div class="col-md-9" style="padding:8px">
        <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>

​

如果您只想将左侧设置为边框，请将padding:0替换为padding-left:0。