html - Bootstrap 4 : Vertically center badge with utilities only

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

使用 flexbox utility classes在 Bootstrap 4 中。这是一个 good guide to 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>