Question

我有一张卡，里面是一张图片，然后是标题。然后，我想要一个段落，并一直链接到卡片底部。我在CSS中定义了最小高度来腾出空间。但是，以下代码只是从上到下流动，底部有空格，而不是内容。

            <div class="col-lg-4">
                <div class="card shadow">
                    <img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
                        <div class="text-center d-block align-items-end">
                            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
            </div>

这是它的外观，我希望lorem ipsum和按钮正对着底部，标题位于顶部。

Answer 1

让我提出一个替代解决方案；一种不需要额外的CSS而是依靠Bootstrap的现有框架的工具。 .card-footer类是Card组件的一部分，可以很好地集成您想要的结果。

要获得相等的高度，您可以依靠.card-deck或简单地将.h100类应用于.card包装器。由于尚不清楚如何将这种设计应用于多张卡片，因此以下示例依赖于.h100：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
  
    <div class="col-sm-6 col-lg-4">
      <div class="card h-100 shadow">
        <img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
        </div>

        <div class="card-footer bg-white border-top-0 text-center">
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>

    <div class="col-sm-6 col-lg-4">
      <div class="card h-100 shadow">
        <img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
        </div>

        <div class="card-footer bg-white border-top-0 text-center">
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
       
    <div class="col-sm-6 col-lg-4">
      <div class="card h-100 shadow">
        <img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
        </div>

        <div class="card-footer bg-white border-top-0 text-center">
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>

  </div>
</div>

现在默认情况下，.card-footer应用顶部边框和稍暗的背景。我们可以通过应用.bg-white修改背景颜色和应用.border-top-0删除顶部边框来覆盖这些样式。没有理由将其声明为块元素，并且使文本居中就像应用.text-center一样简单。

不涉及min-height CSS。

有关如何对“卡”组件进行分组的更多信息，请查看Bootstrap's 4.x documentation on Card layou

Answer 2

您必须将card-body设为flex-column，然后使用Bootstrap实用程序类将元素推到底部进行对齐。

Bootstrap Flex Utilities

因此，我们将.d-flex和.flex-column应用于.card-body div，将.mt-auto应用于包含您的段落和按钮的div。

.card {
  height: 600px;
  /* artificial height */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-lg-4">
      <div class="card shadow">
        <img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
          <div class="text-center d-block mt-auto">
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

引导程序4：为什么它没有与底部对齐？

2 个答案: