Bootstrap 4:为什么不与底部对齐? [英] Bootstrap 4: Why isn't this aligned to the bottom?

问题描述

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

I have a card and in it is an image then a header. Then, I want to have a paragraph and link all of the way at the bottom of the card. I defined a min-height in CSS to make room to do so. However, the following code just flows top to bottom with space at the bottom instead of content there.

            <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和按钮正对着底部，标题位于顶部.

Here is what it looks like and I want the lorem ipsum and button to be right up against the bottom with the headline at the top.

推荐答案

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

Let me suggest an alternative solution; one that would not require additional CSS and instead rely on Bootstrap's existing framework. The .card-footer class is part of the Card component and can integrate very well with your desired results.

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

To achieve equal heights you could rely either on .card-deck or simply applying the .h100 class to the .card wrapper. Since it's unclear how you might be applying this design to multiple cards the below example relies on .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一样简单.

Now by default .card-footer applies a top border as well as a slightly darker background. We can override those styles by applying .bg-white to modify the background color and .border-top-0 to remove the top border. There is no reason to declare it a block element and centering the text is as simple as applying .text-center.

不涉及min-height CSS.

有关如何对Card组件进行分组的更多信息，请查看 Bootstrap的Card layou上的4.x文档

For more information on how the Card component can be grouped please review Bootstrap's 4.x documentation on Card layou

这篇关于Bootstrap 4:为什么不与底部对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！