Question

使用Bootstrap 4，我创建了带有两个card-deck的{{1}}。尽管两个card的高度相同，但是由于来自其他元素的文本的长度，元素不在同一位置。

card

如何确保我的“阅读更多”按钮彼此对齐？

Answer 1

您可以使用d-flex flex-column来制作卡身的弯曲方向列，然后使用mt-auto（margin-top:auto）将按钮推到每张卡的底部... < / p>

<div class="container">
    <div class="card-deck">
        <div class="card" style="margin-top: 0px">
            <div class="card-body d-flex flex-column align-items-start">
                <a>
                    <img class="card-img" src="{{banner.FeatureImage0.Url}}" alt="Card image cap" style="width:200px; height: 132.531; float: right; margin-left:10px;">
                </a>
                <h5 class="card-title">Get to Know...FirstName LastName</h5>
                <p class="card-text" style="margin-bottom: 20px;">In this interview we feature FirstName LastName, Community Relations and Social Responsibility Officer, Executive Vice President.</p>
                <a class="btn btn-primary mt-auto" style="color:white !important;">Read More</a>
            </div>
        </div>
        <div class="card" style="margin-top: 0px">
            <div class="card-body d-flex flex-column align-items-start">
                <a>
                    <img class="card-img" src="{{banner.FeatureImage0.Url}}" alt="Card image cap" style="width:200px; height: 132.531; float: right; margin-left:10px;">
                </a>
                <h5 class="card-title">Questions are more important than answers - August ethics message</h5>
                <p class="card-text" style="margin-bottom: 20px;">The August ethics message comes from FirstName LastName, Wisconsin Region CEO.</p>
                <a class="btn btn-primary mt-auto" style="color:white !important;">Read More</a>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/nxTqqN1uWC

此解决方案不需要更改卡的结构，因为所有内容都应保留在card-body中。

Answer 2

您的卡片内容高度不同。如果看到的话，其中一个标头在一个小窗口中占了2行，而另一个标头则占了2行。有多种解决方法。一种方法是将宽度分配给标题，然后在其上放置省略号。同样，您可以对身体执行此操作。在控制完按钮前所有内容的高度之后，您的内容将对齐。

省略号：

p {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  border: 1px solid #ddd;
  margin: 0;
}

Answer 3

卡片已经具有弹性，因此您可能必须添加“文本容器”以填充底部（按钮高度加上一些额外的边距：例如2.5rem），并使按钮绝对定位到卡片主体底部（相同的距离） / size作为卡体的边距：1.5rem）

.card-body {
  position: relative;
}

.card-body .emp-container {
  padding-bottom: 2.5rem;
}

.card-body .btn {
  position: absolute;
  bottom: 1.25rem;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="card-deck">
  <div class="card" style="margin-top: 0px">
    <div class="card-body">
      <div class="emp-container">
        <a>
          <img class="card-img" src="https://picsum.photos/200/300" alt="Card image cap" style="width:200px; height: 132.531; float: right; margin-left:10px;">
        </a>
        <h5 class="card-title">Get to Know...FirstName LastName</h5>
        <p class="card-text" style="margin-bottom: 20px;">In this interview we feature FirstName LastName, Community Relations and Social Responsibility Officer, Executive Vice President., Community Relations and Social Responsibility Officer, Executive Vice President., Community Relations and Social
          Responsibility Officer, Executive Vice President.</p>
      </div> <a class="btn btn-primary" style="color:white !important;">Read More</a>
    </div>
  </div>
  <div class="card" style="margin-top: 0px">
    <div class="card-body">
      <div class="emp-container">
        <a>
          <img class="card-img" src="https://picsum.photos/200/300" alt="Card image cap" style="width:200px; height: 132.531; float: right; margin-left:10px;">
        </a>
        <h5 class="card-title">Questions are more important than answers - August ethics message</h5>
        <p class="card-text" style="margin-bottom: 20px;">The August ethics message comes from FirstName LastName, Wisconsin Region CEO.</p>
      </div>
      <a class="btn btn-primary" style="color:white !important;">Read More</a>
    </div>
  </div>
</div>

在单独的div中对齐元素

3 个答案: