Bootstrap 4：垂直居中徽章，仅包含实用程序

Question

我正在制作一张 Bootstrap 4 卡片，它的标题需要有一个图像、标题、副标题、徽章和一个关闭按钮。并且徽章需要在右侧垂直居中，而图像、标题和副标题需要在左侧垂直居中。

这是一张图片，它会更好地解释事情：

而且我无法获得标题和副标题，也无法获得垂直居中的徽章。我必须仅使用 Bootstrap 实用程序来执行此操作，因此如果可能的话，不需要额外的 CSS（或者如果没有其他选择，则很少）。我怎样才能做到这一点？

这是我的代码：

.close {
  font-size: 20px;
  text-shadow: none;
  color: #000;
  opacity: 1;
  position: absolute;
  right: 0;
  top: 0;
}

.card-title {
  font-size: 18px;
}

.card-subtitle {
  font-size: 11px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="card">
  <button type="button" class="close close-chat mr-1" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  <div class="card-header border-0 py-3">
    <img src="http://placehold.it/45x45" class="rounded-circle float-left mr-3">
    <h4 class="card-title mb-0 d-inline align-middle">Card title</h4>
    <span class="badge badge-success float-right px-4 py-1 mt-2">Success</span>
    <h6 class="card-subtitle text-muted">Card subtitle</h6>
  </div>
  <div class="card-block">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Answer 1

使用Bootstrap 4 中的flexbox 实用程序类。如果您不熟悉，这里有一个很好的 flexbox 指南。

下面代码中添加的类是d-flex justify-content-between align-items-center，但您还需要一个带有自己类的标题和副标题的新包装器。

.close {
  font-size: 20px;
  text-shadow: none;
  color: #000;
  opacity: 1;
  position: absolute;
  right: 0;
  top: 0;
}

.card-title {
  font-size: 18px;
}

.card-subtitle {
  font-size: 11px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="card">
  <button type="button" class="close close-chat mr-1" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>

<div class="card-header border-0 py-3 d-flex justify-content-between align-items-center">
    <img src="http://placehold.it/45x45" class="rounded-circle float-left mr-3">
    <div class="mr-auto">
      <h4 class="card-title mb-0 d-inline align-middle">Card title</h4>
      <h6 class="card-subtitle text-muted">Card subtitle</h6>
    </div>
    <span class="badge badge-success px-4 py-1 mt-2">Success</span>
  </div>

<div class="card-block">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>