代码之家 › 专栏 › 技术社区 › Brian

为什么引导网格中的行重叠?

twitter-bootstrap css html

Brian · 技术社区 · 8 年前

希望有人能帮我找出我错过了什么。现在,行是重叠的。我希望根据图像的大小(它们都是相同的大小)适当地隔开两行。我不知道我错过了什么,让它以我想要的方式回应。

    img {
      max-width: 100%;
      -webkit-backface-visibility: hidden;
    }
    
    .gallery-project-thumb {
      position: relative;
    }
    
    .vert-pad {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    
    .gallery-project-thumb img:first-child {
        border: 8px solid #fff;
        -webkit-box-shadow: 0 0 6px 0.5px rgba(0,0,0,.5);
        -moz-box-shadow: 0 0 6px .5px rgba(0,0,0,.5);
        box-shadow: 0 0 6px 0.5px rgba(0,0,0,.5);
        position: absolute;
        z-index: 3;
        -webkit-backface-visibility: hidden;
        display: block;
    }
    
    .gallery-project-thumb img:nth-child(2) {
        z-index: 2;
        margin-bottom: 15px;
        border: 8px solid #fff;
        -webkit-box-shadow: 0 0 6px 1px rgba(0,0,0,.5);
        -moz-box-shadow: 0 0 6px 1px rgba(0,0,0,.5);
        box-shadow: 0 0 6px 1px rgba(0,0,0,.5);
        position: absolute;
        -ms-transform: rotate(-2deg);
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
        -webkit-backface-visibility: hidden;
    }
    .gallery-project-thumb img:nth-child(3) {
        z-index: 1;
        margin-bottom: 15px;
        border: 8px solid #fff;
        -webkit-box-shadow: 0 0 6px 1px rgba(0,0,0,.5);
        -moz-box-shadow: 0 0 6px 1px rgba(0,0,0,.5);
        box-shadow: 0 0 6px 1px rgba(0,0,0,.5);
        position: absolute;
        -ms-transform: rotate(2deg);
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
        -webkit-backface-visibility: hidden;
    }

<div class="row vert-pad gallery-project-container" style="margin-left: 75px; margin-right: 20px;">
    <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="gallery-project-thumb"><img src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"></div>
    </div>
    
    <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="gallery-project-thumb"><img src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"></div>
    </div>
    
    <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="gallery-project-thumb"><img src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"></div>
    </div>
    
    <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="gallery-project-thumb"><img src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"></div>
    </div>
    </div>
    <div class="row vert-pad gallery-project-container" style="margin-left: 75px; margin-right: 20px;">
    <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="gallery-project-thumb"><img src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"></div>
    </div>
    
    <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="gallery-project-thumb"><img src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"></div>
    </div>
    
    <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="gallery-project-thumb"><img src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"></div>
    </div>
    
    <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="gallery-project-thumb"><img src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"> <img class="gallery-project-thumb-background" src="https://via.placeholder.com/840x560"></div>
    </div>
    </div>

1 回复 | 直到 7 年前

i-man 8 年前

因为图像是绝对定位的,浏览器不知道这些元素有多高。如果将.gallery项目thumb类的高度设置为图像的高度,则应将其设置为

.gallery-project-thumb{
    height: 300px;
}