Question

我正在尝试使用引导程序为警报消息卡进行某些设计。我的想法是使用<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中称为媒体对象。

这是一个使用本机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>

Answer 2

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

＆＃13;

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

＆＃13;

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

Bootstrap 4 - 自定义警报弹出框

2 个答案: