我的这张图片上覆盖了文字，不确定是什么原因造成的，但在移动设备(small/xs)上，由于 p 文字太长，播放按钮和标题从图片中消失了。我搞砸了什么 Bootstrap 类导致这个问题？当里面的文本变长时，我认为图像高度会调整以解决这个问题，是图像吗？
html {
font-size: 18px;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1400px;
}
}
h1, .h1 {
font-size: 3.815rem;
}
h2, .h2 {
font-size: 2.441rem;
}
h3, .h3 {
font-size: 1.563rem;
}
h4, .h4 {
font-size: 1.25rem;
}
.product-video-section .product-video-container {
position: relative;
}
.product-video-section .product-video-container video {
height: auto;
vertical-align: middle;
width: 100%;
}
.product-video-section .product-video-container #product-video-button {
color: #d4272e;
}
.product-video-section .product-video-container .product-video {
display: none;
}
.product-video-section .product-video-container .product-video-texts .play-btn-wrap {
text-decoration: none;
background-color: #fff;
border: 1px solid #d4272e;
display: inline-block;
border-radius: 50%;
width: 3.5rem;
height: 3.5rem;
color: #d4272e;
transition: all 300ms ease-in;
cursor: pointer;
}
.product-video-section .product-video-container .product-video-texts .play-btn-wrap i {
font-size: 2rem;
}
.product-video-section .product-video-container .product-video-texts .play-btn-wrap:hover {
background-color: #d4272e;
transition: all 300ms ease-in;
transform: scale(1.2);
}
.product-video-section .product-video-container .product-video-texts .play-btn-wrap:hover i {
color: #fff;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="./Library/bower_components/slick-carousel/slick/slick.min.js"></script>
<script src="./index.js"></script>
<script src="https://unpkg.com/ionicons@4.2.2/dist/ionicons.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick.css" />
<link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick-theme.css" />
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./style/index.css">
</head>
<body>
<div class="product-video-section ">
<div class="product-video-container card">
<img src="https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1">
<div class="card-img-overlay d-flex align-items-center product-video-texts text-dark" id="">
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-end row">
<div class="col-lg-6 col-sm-12">
<h4 class="card-title ">This is video</h4>
<p class="card-text ">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendis! sit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendissit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendis!!
</p>
<div href="" class="play-btn-wrap d-flex justify-content-center" data-toggle="modal"
data-target="#@videoTarget">
<i class="ion-ios-play product-video-button align-self-center pl-1" id="" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>最佳答案
发生这种情况的原因是 div.card-img-overlay 具有以下样式:
.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 1.25rem;
}
这意味着随着该元素内的内容变大(或框本身变小)，框将不会扩展以适应内容。这是 Bootstrap 卡组件的限制，您没有做错任何事情。
您有几个选项可以解决此问题:
1) 限制允许进入卡片内部的内容量，以防止这种情况发生。对我来说，这是唯一真正的解决方案。根据我的测试，65 个单词或大约 675 个字符的限制似乎适用于所有媒体查询(使用您当前的样式)。
1b) 增加图像的高度。我不确定这是否可行，您需要将这项工作与我之前关于限制文本输入的建议相协调。
2) 编写媒体查询以相应地减小字体大小，以便在必要时调整文本以适合。这是一个乏味的解决方案，但仍然是一个解决方案。但是，无法编写多少样式来容纳任意数量的文本。您仍然需要限制可以放入卡片中的文本量。
3) 使用element queries每当元素变得太小时调整文本的大小。这与使用 CSS 媒体查询没有太大区别。
4) 放弃卡片组件，只创建一个以图像为背景的 div。您可以使用 background-size css 属性来调整图像随着元素变大或变小而拉伸(stretch)和调整大小的方式。
关于html - Bootstrap 4 card-Image-叠加文字流出图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54699706/