Bootstarp 4-网格系统-Flex-Box中的固定项目

问题描述

以中等大小向上，直到大屏幕，第二个图像高度与其他图像不相等 [在此处输入图片描述] [1]

https://i.stack.imgur.com/Qcytg.png

<div class="container">
          <div class="row "> 
            <% campgrounds.forEach(function(campground){ %>
              <div class="col-sm text-center d-flex align-items-strech">
                      <div class="card">
                      <img class="card-img-top" src="<%=campground.image%>" alt="Card image cap">
                      <div class="card-body">
                        <h3 class="card-title"><%=campground.name%></h3>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> 
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                       </div>
                    </div>
                  </div>
              <% }); %>
        </div>
 </div>

解决方法

您可以在该按钮上添加align-self-end-end类，以使其在底部对齐。