Bootstrap 卡片内容溢出背景高度

Question

我目前运行我的 HTML/CSS (Bootstrap 5.0) 代码遇到了问题。我正在尝试使用 Bootstrap 5.0 网格系统和 Masonry 库来实现 Pinterest 风格的 Masonry 卡片库。我运行遇到的问题是内容溢出超过背景容器高度。在您调整 window.

的大小之前，这些卡片似乎也会相互堆叠

是否有更好的方法来使用 Bootstrap 5.0 或您在我的代码中看到的任何会导致此溢出 height/stacking 问题的问题来实现 Masonry 布局？让我知道是否可以提供更多信息或代码：

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="bootstrap.css" type="text/css" />
        <link rel="stylesheet" href="style.css" type="text/css" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
        <title>Grayson Felt</title>
    </head>
        <div class="background-image">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid px-4">
                    <a class="navbar-brand" href="index.html">
                    <h2 style="color: var(--light-blue)">
                    <i class="bi bi-postage-heart"></i>
                    </h2>
                    </a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                        <a class="nav-link" href="index.html">Home</a>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Gallery</a>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link" href="professional.html">Professional</a>
                        </li>
                    </ul>
                    </div>
                </div>
                </nav>
            <div class="whole px-5 p-3 my-3">
                <div class ="px-5 p-3 my-3 justify-content-center container-fluid bg-white-trans">

                    <h1 class="text-center display-3">Gallery</h1>

                    <div class="container py-5">

                        <div class="row row-cols-1 row-cols-md-3 g-4" data-masonry='{"percentPosition": true }'>

                            <div class="col">
                                <div class="card">
                                    <img src="https://picsum.photos/id/237/200/300" class="card-img-top" alt="...">
                                    <div class="card-body">
                                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="col">
                                <div class="card">
                                    <img src="https://picsum.photos/id/237/300/200" class="card-img-top" alt="...">
                                    <div class="card-body">
                                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="col">
                                <div class="card">
                                    <img src="https://picsum.photos/id/237/200/300" class="card-img-top" alt="...">
                                    <div class="card-body">
                                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="col">
                                <div class="card">
                                    <img src="https://picsum.photos/id/237/300/200" class="card-img-top" alt="...">
                                    <div class="card-body">
                                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="col">
                                <div class="card">
                                    <img src="https://picsum.photos/id/237/200/300" class="card-img-top" alt="...">
                                    <div class="card-body">
                                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="col">
                                <div class="card">
                                    <img src="https://picsum.photos/id/237/200/300" class="card-img-top" alt="...">
                                    <div class="card-body">
                                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                    </div>
                                </div>
                            </div>

                        </div>                
                    </div>

                </div>
            </div>
        </div>            
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
</html>

非Bootstrap CSS属性


:root{
    --light: #7C766A;
    --dark: #4D473E;
    --gray: #B8B8B8;
    --white: #D9D9D9;
    --black: #010400;
    --purple: #594AF6;
    --blue: #40B2B2;
    --green: #AFB116;
    --yellow: #D0A000;
    --red: #A54738;
}

.background-image{
    background-image: url('https://www.teahub.io/photos/full/17-179150_2560x1600-monet-desktop-wallpaper-monet-poppies.jpg');
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
  }

a:link{     color:var(--blue);  }
a:visited { color:var(--purple);}

header, .post{
    -webkit-box-shadow: 0px 10px 0px 1px var(--dark);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:    0px 10px 0px 1px var(--dark);  /* Firefox 3.5 - 3.6 */
    box-shadow:         0px 10px 0px 1px var(--dark);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
    background-color:var(--white);
    border-radius: 10px;
    padding:40px;
    margin:40px;
}

.post-head p{
    color:var(--dark);
    font-size:15px;
    padding-bottom:30px;
}

.post-head h3{
    font-size:20px;
    color:var(--dark);
}

.post img{
    height:200px;
    width: 200px;
    margin:10px;
}

.sidenav {
    -webkit-box-shadow: 0px 10px 0px 1px var(--dark);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:    0px 10px 0px 1px var(--dark);  /* Firefox 3.5 - 3.6 */
    box-shadow:         0px 10px 0px 1px var(--dark);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
    border-radius: 10px;
    height: 86%;
    width: 20%;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: var(--white);
    overflow-x: hidden;
    padding-top: 20px;
    padding-bottom: 20px;
    margin:40px;
  }
  
  .sidenav p{
      margin-left:40px;
  }

  @media screen and (max-width: 1650px) {
      .sidenav{
          display:none !important
      }
      header, .post{
          width:75%
      }
  }

  .highlight{
    text-decoration:underline 2px;
    text-decoration-color:var(--yellow);
}

.rainbow{
    background: url(assets/rainbow.JPG) no-repeat center center fixed;
    background-size: 100% 100%;
    height:5px;
    position:fixed;
    left:0px;
    bottom:0px;
    width:100%;

}

/* this is needed to make the content scrollable on larger screens */
@media (min-width: 576px) {
    .h-sm-100 {
        height: 100%;
    }
}

 @media (max-width: 600px) {
    .whole {
      width:100%;
    }

  }
  @media (min-width:600px) {
    .whole {
      width:90%;
      align-content: center;
      justify-content: center;
      margin: auto;
      
    }
  }

编辑：

这是 overflow/stacking 问题的图像：

Answer 1

只关注砌体布局（您还有其他几个高度问题）- 这个问题实际上是由每张卡片中的 <img> 元素引起的。可以考虑使用 <div> 和 background-image 而不是使用 <img>。这可能会导致图像的纵横比出现一些问题，但是使用 padding-top 可以解决这个问题。这是一个例子：

<div style='
background-image: url("https://picsum.photos/id/237/200/300");
background-color: #cccccc; 
background-repeat: no-repeat; 
background-size: cover; 
width: 100%; 
height: 0; 
padding-top: 150%'></div>

Bootstrap 卡片内容溢出背景高度

Bootstrap card content overflowing past background height

html

javascript

css

bootstrap-5