简体   繁体   English

引导卡内容溢出超过背景高度

[英]Bootstrap card content overflowing past background height

I am currently running into an issue with my HTML/CSS (Bootstrap 5.0) code.我目前遇到了我的 HTML/CSS (Bootstrap 5.0) 代码的问题。 I am trying to implement a Pinterest style Masonry card gallery using the Bootstrap 5.0 grid system and the Masonry library.我正在尝试使用 Bootstrap 5.0 网格系统和Masonry库来实现 Pinterest 风格的 Masonry 卡片库。 The issue I run into is that the content overflows past the background container height.我遇到的问题是内容溢出背景容器高度。 The cards also seem to stack over each other until you resize the window.在您调整窗口大小之前,这些卡片似乎也相互堆叠。

Is there a better way to implement a Masonry layout with Bootstrap 5.0 or any issues you can see with my code that would cause this overflow height/stacking issue?有没有更好的方法来使用 Bootstrap 5.0 实现 Masonry 布局,或者您可以在我的代码中看到任何会导致溢出高度/堆叠问题的问题? Let me know if I can provide any more information or code:让我知道是否可以提供更多信息或代码:

<!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>

Non-Bootstrap CSS Properties非引导 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;
      
    }
  }

Edit:编辑:

Here is an image of the overflow/stacking issue:这是溢出/堆叠问题的图像: 堆栈/溢出问题

To just focus on the masonry layout (you have a couple of other height issues) - the issue is actually being caused by the <img> element in each of your cards.只关注砖石布局(您还有其他几个高度问题) - 该问题实际上是由每张卡片中的<img>元素引起的。 Instead of using an <img> maybe consider using a <div> with a background-image .除了使用<img>之外,还可以考虑使用带有background-image<div> This could cause some issues with the aspect ratio of the image but there is a nice hack for that using padding-top.这可能会导致图像的纵横比出现一些问题,但使用 padding-top 有一个很好的技巧。 Here's an example:这是一个例子:

<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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM