html - Bootstrap 4 : Full Width Inline Button

Question

标题可能会引起误解，但我不知道该怎么命名。 在任何情况下，我都需要一个内联文本的 div/图像，以及该文本下方的一个按钮。问题是，无论我尝试什么，我都无法在不添加任何填充的情况下真正让按钮占据整个宽度。

为了让我的解释更清楚，这是我正在尝试制作的图像:

我尝试只使用 Bootstrap 4 实用程序。 到目前为止，这是我的代码:

.col-md-3 {
  background-color: #ededed;
}
.img {
  width: 188px;
  height: 88px;
  background-color: #292a2c;
}
.btn {
  background-color: #292a2c;
  color: #ededed;
}

<div class="col-md-3 d-flex p-0">
  <div class="img"></div>
    <div>
      <h6 class="m-auto">Text goes here</h6>
      <button class="btn rounded-0 btn-block">Button</button>
    </div>
</div>

我怎样才能使这项工作？此外，带有类 .img 的 div 在某种程度上是一个占位符，需要保持这样。

谢谢!

Answer 1

您可以通过使用 Bootstrap 媒体对象而不使用额外的 CSS 来实现这一点。请看下面的代码片段

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="media">
        <img src="https://via.placeholder.com/188x88" class="mr-3" alt="">
        <div class="media-body">
          <h5 class="mt-0">Media heading</h5>
          <button class="btn btn-primary btn-block">Button</button>
        </div>
      </div>
    </div>
  </div>
</div>