使用 Card-img-overlay 和 card-columns 的问题答案

【问题标题】：Problems using Card-img-overlay with card-columns使用 Card-img-overlay 和 card-columns 的问题
【发布时间】：2020-02-03 05:19:43
【问题描述】：

我正在使用 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 的卡上。当屏幕具有更高的分辨率时，显示会按预期进行：

当屏幕较小时：

省略了部分肉及其内容物。我试过填充顶部，但它不能正常工作。

此外，我似乎无法使图像适合。我尝试了垂直更大的图像，但我只能得到卡片占据了与图像高度相对应的空间。

如何防止内容被另一张卡片覆盖？让图片一直占据卡片的所有空间？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

是因为card-img-overlay的父div元素没有设置为relative，没有固定的高度。为父 div 元素（即 .card）设置一个最小高度，这样当视口变小时它就不会缩小。

  .card {
    min-height: 300px;
    position: relative; 
  }

https://jsfiddle.net/svwb6r31/

【讨论】：

【解决方案2】：

我认为bootstrap 暗示这个想法的方式不是最好的。带有position: absolute 的元素正在从DOM 中删除，并且无法适应它的内容。

我建议将.card-img-overlay 替换为.card-body，而不是<img> 将div 替换为图像作为背景，并使用sn-p 中的参数。

.bg-img {
  opacity: 65%;
  background: no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-image: url(https://source.unsplash.com/user/erondu/1920x1080);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.bg-img + .card-body {
  position: relative;
  z-index: 1;
}

<!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">
      <div class="bg-img"></div>
      <div class="card-body">
        <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>

【讨论】：