如何将 Bootstrap 4 卡标题文本垂直对齐到底部

Question

我排列了四张 Bootstrap 4 卡片，但其中一张卡片的标题换行到第二行。我如何编码才能使所有四个卡片标题齐平？

我尝试将每张卡片的高度设置为特定像素高度，然后应用 vertical-align: bottom，但这不起作用。

<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" />

<div class="container">
  <div class="card-group">
    <div class="card img-fluid">
      <img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
      <div class="card-img-overlay">
        <h5 class="card-title">FIRST CARD</h5>
        <hr>
        <p class="card-text">Tech virtual drone online browser platform through in a system. Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>
      </div>
    </div>
    <div class="card img-fluid">
      <img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
      <div class="card-img-overlay">
        <h5 class="card-title">SECOND CARD</h5>
        <hr>
        <p class="card-text">But stream software offline. Professor install angel sector anywhere create at components smart.</p>
      </div>
    </div>
    <div class="card img-fluid">
      <img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
      <div class="card-img-overlay">
        <h5 class="card-title">THIRD CARD WITH MUCH LONGER TITLE</h5>
        <hr>
        <p class="card-text">Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>
      </div>
    </div>
    <div class="card img-fluid">
      <img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
      <div class="card-img-overlay">
        <h5 class="card-title">FOURTH CARD</h5>
        <hr>
        <p class="card-text">Now digital designs id anywhere atoms. Now strategy startups documents designs. Venture crypto adopters niche. Video algorithm system ultra-private policies engineering.</p>
      </div>
    </div>
  </div>
</div>

这是一个代码笔：https://codepen.io/Codewalker/pen/RXxaVM

Answer 1

我假设您的卡片标题内容是动态的，所以我认为您无法真正预见多少高度就足够了。

我会选择 "truncating the text with an ellipsis" 方法 title:

<h5 class="card-title text-truncate" title="THIRD CARD WITH MUCH LONGER TITLE">
    THIRD CARD WITH MUCH LONGER TITLE
</h5>
<hr>

演示： https://jsfiddle.net/davidliang2008/fdwshkzo/5/

Answer 2

How can I code this so that all four card titles are flush bottom.

情况 1：如果您的内容标题不是动态的。

如果你想让卡片齐平到底部。您需要设置它的 height 并使用 flexbox 将其刷新到底部。

查看下面的代码。

.card-title-cont{
  height: 50px;
  display:flex;
  justify-content: flex-start;
  align-items: flex-end;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>




<div class="container">
          <div class="card-group">
                <div class="card img-fluid">
                <img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
                <div class="card-img-overlay">
                  <div class="card-title-cont">
                    <h5 class="card-title">FIRST CARD</h5>
                  </div>
                  <hr>
                  <p class="card-text">Tech virtual drone online browser platform through in a system. Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>
                </div>
                </div>
                
                <div class="card img-fluid">
                <img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
                <div class="card-img-overlay">
                  <div class="card-title-cont">
                    <h5 class="card-title">SECOND CARD</h5>
                  </div>
                  <hr>
                  <p class="card-text">But stream software offline. Professor install angel sector anywhere create at components smart.</p>
                </div>
                </div>
                
                <div class="card img-fluid">
                <img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
                <div class="card-img-overlay">
                  <div class="card-title-cont">
                    <h5 class="card-title">THIRD CARD WITH MUCH LONGER TITLE</h5>
                  </div>
                  <hr>
                  <p class="card-text">Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>
                </div>
                </div>
                
                <div class="card img-fluid">
                <img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
                <div class="card-img-overlay">
                  <div class="card-title-cont">
                    <h5 class="card-title">FOURTH CARD</h5>
                  </div>
                  <hr>
                  <p class="card-text">Now digital designs id anywhere atoms. Now strategy startups documents designs. Venture crypto adopters niche. Video algorithm system ultra-private policies engineering.</p>
                </div>
                </div>
              </div>  
          </div>

情况 2：如果您的内容标题是动态的。

我建议您将标题的样式设置为 text-overflow: ellipsis;，因为内容是动态的。

.card-title{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>



<div class="container">
          <div class="card-group">
                <div class="card img-fluid">
                <img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
                <div class="card-img-overlay">
                  <h5 class="card-title">FIRST CARD</h5>
                  <hr>
                  <p class="card-text">Tech virtual drone online browser platform through in a system. Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>
                </div>
                </div>
                
                <div class="card img-fluid">
                <img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
                <div class="card-img-overlay">
                  <h5 class="card-title">SECOND CARD</h5>
                  <hr>
                  <p class="card-text">But stream software offline. Professor install angel sector anywhere create at components smart.</p>
                </div>
                </div>
                
                <div class="card img-fluid">
                <img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
                <div class="card-img-overlay">
                  <h5 class="card-title">THIRD CARD WITH MUCH LONGER TITLE</h5>
                  <hr>
                  <p class="card-text">Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>
                </div>
                </div>
                
                <div class="card img-fluid">
                <img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
                <div class="card-img-overlay">
                  <h5 class="card-title">FOURTH CARD</h5>
                  <hr>
                  <p class="card-text">Now digital designs id anywhere atoms. Now strategy startups documents designs. Venture crypto adopters niche. Video algorithm system ultra-private policies engineering.</p>
                </div>
                </div>
              </div>  
          </div>

希望对您有所帮助。

如何将 Bootstrap 4 卡标题文本垂直对齐到底部

How to vertically align Bootstrap 4 card title text to bottom

css

bootstrap-4

bootstrap-cards