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

【问题标题】：Bootstrap 4 card-Image-overlay text flowing out of imageBootstrap 4 card-Image-overlay text flow out of image
【发布时间】：2019-02-27 00:55:19
【问题描述】：

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

【问题讨论】：

    标签： html twitter-bootstrap css bootstrap-4


    【解决方案1】：

    发生这种情况的原因是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 属性来调整图像如何随着元素变大或变小而拉伸和调整大小。

    【讨论】：

      【解决方案2】：

      您在这里有一些相互竞争的属性。一方面，display: flex; 和flex-direction: column; 告诉&lt;img&gt; 填充.dnow-video-container.card 的水平空间（注意它保持其自然的500px 高度）但你绝对定位.card-img-overlay，从而删除它的高度来自文档的考虑。所以父级.dnow-video-container.card 正在崩溃到&lt;img&gt; 的高度。边框样式或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>

      【讨论】：

        【解决方案3】：

        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>

        【讨论】：

        • 您对此满意还是真的要使用&lt;img&gt; 标签？
        【解决方案4】：

        添加到这个 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

        希望能解决它，祝你好运！

        【讨论】：

          【解决方案5】：

          该元素内部的内容变大（或盒子本身变小），盒子不会扩大以适应内容。 所以我建议使用 background-size css 属性来调整图像如何随着元素变大或变小而拉伸和调整大小。

          .parent {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

          除此之外，您还可以使用 &lt;center&gt;&lt;/center&gt; 标签并使用 css poperty border 来确保它在框内。

          【讨论】：

          • -1 - 您从另一个答案复制了内容，同时提供了相同答案建议的解决方案。此外，&lt;center&gt; 元素已过时，不应在当今的 HTML 中使用。
          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2019-07-26
          • 1970-01-01
          • 1970-01-01
          • 2011-02-10
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多
          热门标签
          Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode