0

我排列了四张 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

4

2 回答 2

2

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

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

希望这会有所帮助。

于 2019-08-06T00:10:14.017 回答
0

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

我会选择“用省略号截断文本”的方法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/

于 2019-08-05T22:04:47.530 回答