Bootstrap 引导程序4：为什么不与底部对齐？

jmp7cifd 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(3)|浏览(198)

我有一张卡片，里面有一张图片，然后是一个标题。然后，我想在卡片的底部有一个段落和链接。我在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和按钮是正确的对底部的标题在顶部。

twitter-bootstrap

来源：https://stackoverflow.com/questions/55738048/bootstrap-4-why-isnt-this-aligned-to-the-bottom

3条答案

按热度按时间

nukf8bse1#

让我提出一个替代的解决办法; .card-footer类是Card组件的一部分，可以很好地与您想要的结果集成。
为了实现相同的高度，你可以依赖.card-deck，或者简单地将.h100类应用到.card Package 器。由于不清楚你如何将这种设计应用到多张卡片上，下面的例子依赖于.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。
有关如何对Card组件进行分组的详细信息，请查看Bootstrap的4.x文档中有关Card layou的内容

赞(0）回复(0）举报 2022-12-07

ws51t4hk2#

您必须使card-body成为一个flex-column，然后使用Bootstrap实用程序类将元素推到底部。
Bootstrap Flex Utilities
因此，我们将.d-flex和.flex-column应用于.card-body div，将.mt-auto应用于包含段落和按钮的div。
第一个