Bootstrap 4卡图像叠加文字从图像中流出
我在这张图片上叠加了文字，不知道是什么原因造成的，但是在移动设备上（小/ xs），由于p文字太长，因此播放按钮和标题从图片中消失了。我弄错了什么引导程序类来导致此问题？我认为当里面的文本变长时，图像高度会调整以解决这个问题，是图像吗？。
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>
5 个答案:
答案 0 :(得分：3)
发生这种情况的原因是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）编写Media查询以相应地减小字体大小，以便在必要时调整文本以使其适合。这是一个乏味的解决方案，但是仍然是一个解决方案。但是，不能编写任何样式来容纳任何数量的文本。您仍然需要限制卡内的文本量。
3）每当元素变得太小时，请使用element queries来调整文本的大小。这与使用CSS媒体查询没什么不同。
4）放弃卡组件，仅创建一个以图像为背景的div。您可以使用background-size css属性来调整图像在元素变大或变小时的拉伸和调整大小。
答案 1 :(得分：2)
您在这里有一些相互竞争的属性。一方面，display: flex;和flex-direction: column;告诉<img>填充.dnow-video-container.card的水平空间（请注意，它保持其自然的500px高度），但是您绝对定位.card-img-overlay，从而将其高度从文档考虑范围中删除。因此，父级.dnow-video-container.card崩溃到<img>的高度。边框样式或overflow: hidden;" on。dnow-video-container.card , would illustrate that the。card-img-overlay`溢出了它的父对象。
我在此困境中使用的一种解决方案是将图像分配为父对象的background-image，允许可重排的文本内容设置父对象的高度。
.parent {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.overlay {
padding: 1.25rem;
color: white;
}<div class="parent" style="background-image: url('https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1')">
<div class="overlay">
<h4>This is video</h4>
<p>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>
</div>
答案 2 :(得分：1)
在这种情况下，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 {
height: 35rem;
}
.product-video-section .product-video-container {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
}
.product-video-section .product-video-container .product-video-texts {
position: absolute;
top: 50%;
left: 70%;
transform: translate(-50%, -50%);
color: white;
}
.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 {
color: #d4272e;
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;
}
@media (max-width: 992px) {
.product-video-texts {
top:50% !important;
left:40% !important;
}
}<!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">
<div class="product-video-texts" id="">
<div class="text-white">
<h4>This is video</h4>
<p>
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!
</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>
</body>
</html>
答案 3 :(得分：0)
添加到此div（“ col-lg-6 col-sm-12”）类中以解决该问题：
<style>.example { max-height: 100vh; overflow: auto; }</style>
<div class="col-lg-6 col-sm-12 example">
<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 dnow-video-button align-self-center pl-1" id="" aria-hidden="true"></i>
</div>
</div>
了解更多：overflow，length units
希望能解决这个问题，祝你好运！
答案 4 :(得分：-1)
该元素内部的内容变大（或框本身变小），框将不会扩展以适合内容。 因此，我建议使用background-size css属性来调整图像在元素变大或变小时如何拉伸和调整大小。
\documentclass{article}
\usepackage{tikz}
\newcommand\TBox[3][]{%
\tikz\node[draw,ultra thick,text width=#2,align=left,#1,baseline=(current bounding box.north)] {#3};}
\begin{document}
\TBox{14cm}{%
\TBox{10cm}{xxx \vspace{9cm}} \TBox{3cm} \\
}
\end{document}
除了存在之外，您还可以使用.parent {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
标签，并使用css poperty <center></center>来确保它在盒子里。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？