时间戳

首页 > 解决方案 > 带有中心和底部元素的引导卡覆盖

html - 带有中心和底部元素的引导卡覆盖

问题描述

我创建了一张带有背景图像的卡片，我使用了 bootstrap 文档中的基本示例，但在叠加层中，我必须将元素对齐在中心的一列中，除了最后一个必须在底部对齐的元素。

这是我迄今为止创建的，但对我来说，html 看起来很笨重。有没有更好的方法来达到相同的结果？喜欢更少的 div 或类？

<div class="page-wrapper">
   <div class="card bg-dark text-white">
      <img class="card-img" src="https://placeimg.com/1000/450/nature" alt="Card image">
      <div class="card-img-overlay d-flex flex-column">
         <div class="content-wrapper container d-flex flex-grow-1 flex-column justify-content-center align-items-center">
            <p class="card-text">Last updated 3 mins ago</p>
            <h1 class="card-title">Card title</h1>
            <p class="card-text">This content is a little bit longer.</p>            
         </div>

         <ul class="nav justify-content-center">
            <li class="nav-item">
               <a class="nav-link" href="#detail">Detail</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#gallery">Gallery</a>
            </li>
         </ul>
      </div>
   </div>
</div>

标签： htmlcsstwitter-bootstrapflexboxbootstrap-4

解决方案

推荐阅读