html - 使用 Card-img-overlay 和 card-columns 的问题
问题描述
我正在使用 Bootstrap 4.4 创建卡片列:
<!DOCTYPE html>
<html>
<head>
<title>Problems using Card-img-overlay with card-columns</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="card-columns" style="padding-top: 2%;">
<div class="card">
<img class="card-img" src="https://source.unsplash.com/user/erondu/1920x1080" style="opacity: 65%;">
<div class="card-img-overlay">
<h4 class="card-title">Card Title</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-light" href="">Leia mais</a>
</div>
</div>
<div class="card bg-danger text-white mb-2">
<div class="card-header">
Cabeçalho do cartão
</div>
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-light" href="">Leia mais</a>
</div>
</div>
<div class="card bg-primary text-white mb-2">
<div class="card-header">
Cabeçalho do cartão
</div>
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-light" href="">Leia mais</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-primary" href="">Leia mais</a>
</div>
</div>
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="">Link 3</a>
</li>
</ul>
</div>
<div class="card-body">
<h4>Título do cartão</h4>
<h6>Subtítulo do cartão</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-danger btn-block" href="">Leia mais</a>
</div>
</div>
<div class="card bg-success text-white mb-2">
<div class="card-header">
Cabeçalho do cartão
</div>
<div class="card-body">
<h4 class="card-title">Título do cartão</h4>
<h6 class="card-subtitle">Subtítulo do cartão</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien dui, feugiat et lorem quis, fringilla maximus nisl. Vivamus sed est pulvinar, aliquet purus ut, dictum elit.</p>
<a class="btn btn-outline-success" href="">Leia mais</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
问题出在我使用 Card-img-overlay 的卡上。当屏幕具有更高的分辨率时,显示会按预期进行:
当屏幕较小时:
省略了部分肉及其内容物。我尝试填充顶部,但它不能正常工作。
此外,我似乎无法使图像适合。我尝试了垂直更大的图像,但我能得到的只是卡片占据了与图像高度相对应的空间。
如何防止内容被另一张卡覆盖?让图像总是占据卡片的所有空间?
解决方案
这是因为card-img-overlay的父div元素没有设置为relative,也没有固定的高度。为父 div 元素(即 .card)设置一个最小高度,这样当视口变小时它就不会缩小。
.card {
min-height: 300px;
position: relative;
}
推荐阅读
- git - 在 Linux 中执行 git config 命令后 GIT Push 什么也不做
- javascript - 在用户仍在键入时异步获取输入值
- swift - ios 13 推送通知设备令牌
- python - 管理每日购物清单,'list' 对象不可调用
- git - 如何将我的 git 远程分支恢复到 IntelliJ 中的先前提交?
- c# - 我可以将 C/C++ 结构中的数据编组到具有属性的 C# 结构中吗?
- javascript - How to delay "ngondestroy" hook calling while components destroy?
- node.js - binding/bcrypt_lib.node' was compiled against a different Node.js version using NODE_MODULE_VERSION
- php - 执行mysqli语句后如何获取行数?
- java - How can I read odd and even lines for coordinates in Java?