时间戳

首页 > 解决方案 > Bootstrap 4 card-Image-overlay text flow out of image

html - Bootstrap 4 card-Image-overlay text flow out of image

问题描述

我有这个覆盖了文本的图像，不确定是什么原因造成的，但是在移动设备（小/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>

标签： htmltwitter-bootstrapcssbootstrap-4

解决方案

发生这种情况的原因是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)每当元素变得太小时，使用元素查询来调整文本的大小。这与使用 CSS 媒体查询没有太大区别。

4）放弃卡片组件，只创建一个以图像为背景的div。您可以使用background-sizecss 属性来调整图像如何随着元素变大或变小而拉伸和调整大小。

推荐阅读