Question

我有一张很长的引导卡，其中包含两行信息，标题和说明。然后，我想要一个按钮，该按钮在这张卡的右侧居中对齐。我当前的html如下所示：

<div class="card card-body">
  <h4>I'm a Card</h4>
  <p>The button should be central, at the end of this card.</p>
  <input type="button"
        class="btn btn-outline-primary align-self-end"
        value=".align-self-end">
</div>

Codepen：https://codepen.io/Darlton29/pen/ZEbyNXe

如您所见，该按钮位于卡的底部，导致其高度增加。我如何确保它始终位于卡的末端，中心，并且不会增加卡的高度？谢谢。

Answer 1

将flex-direction: row添加到卡中，添加内容的容器，然后在按钮上将align-self-end更改为align-self-center。

.mycard {
  flex-direction: row!important;
  justify-content: space-between;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="card card-body mycard">
        <div>
          <h4>I'm a Card</h4>
          <p>
            The button should be central, at the end of this card.
          </p>
        </div>
        <input type="button" class="btn btn-outline-primary align-self-center" value="Button">
      </div>
    </div>
  </div>

如何在卡片末端垂直对齐的情况下对齐项目（使用引导程序4）？

1 个答案: