时间戳

首页 > 解决方案 > 如何将 Bootstrap 4 卡片标题文本垂直对齐到底部

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

问题描述

我排列了四张 Bootstrap 4 卡，但其中一张卡的标题换成了第二行。我该如何编码，以便所有四张卡片标题都齐底？

我尝试将每张卡片的高度设置为某个像素高度，然后应用垂直对齐：底部，但这不起作用。

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

这是一个 Codepen：https ://codepen.io/Codewalker/pen/RXxaVM

标签： cssbootstrap-4bootstrap-cards

解决方案

我如何对此进行编码，以使所有四张卡片标题都齐平。

案例 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>

希望这会有所帮助。

推荐阅读