在bootstrap中创建两个不同的行具有相同高度的元素

Question

我问过一个类似的问题，我会删除，因为这个问题专注于我的真正问题：让它们达到相同的高度。

我在bootstrap中有两个不同的行，一个有3个div（图像），另一个有4个div（也是图像）。图像是完全相同的形状和纵横比（矩形），但我希望它们保持相同的大小。基本上，我希望第二行元素靠近（可能是重叠的行），这样所有元素都与顶行的大小相同。

<div class="row">
                <div class="col-sm-4 portfolio-item dontwantpadding">
                    <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
                        <div class="caption">
                            Caption
                            <div class="caption-content">
                                <i class="fa fa-3x">Hello</i>
                            </div>
                        </div>
                        <img src="img/portfolio/BLM.png" class="triUp img-responsive" alt="">
                    </a>
                </div>
<!-- +3x in row. . . .--> </div>

<div class="row">
                <div class="col-sm-3 portfolio-item dontwantpadding">
                    <a href="#portfolioModal4" class="portfolio-link" data-toggle="modal">
                        <div class="caption">
                            <div class="caption-content">
                                <i class="fa fa-search-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/ALS.jpg" class="triUp img-responsive" alt="">
                    </a>
                </div>
<!-- +3x in row. . . .--> </div>

图像本身是正方形，但它们以三角形掩盖。我在下面写了一张照片。

Answer 1

那么你需要添加第4项，然后添加类col-sm-4 portfolio-item dontwantpadding和额外的类。 leftShifted。将同一课程应用于第2和第3列，这样您就可以col-sm-4 portfolio-item dontwantpadding leftShifted 你的标记看起来会是：

               <div class="col-sm-4 portfolio-item dontwantpadding">
                    <a href="#portfolioModal4" class="portfolio-link" data-toggle="modal">
                        <div class="caption">
                            <div class="caption-content">
                                <i class="fa fa-search-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/ALS.jpg" class="tri-Up img-responsive" alt="">
                    </a>
                </div>
                <div class="col-sm-4 portfolio-item dontwantpadding leftShifted">
                    <a href="#portfolioModal5" class="portfolio-link" data-toggle="modal">
                        <div class="caption">
                            <div class="caption-content">
                                <i class="fa fa-search-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/kickinit.jpg" class="tri-Down img-responsive" alt="">
                    </a>
                </div>
                <div class="col-sm-4 portfolio-item dontwantpadding leftShifted">
                    <a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
                        <div class="caption">
                            <div class="caption-content">
                                <i class="fa fa-search-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/MarshMad.jpg" class="tri-Up img-responsive" alt="">
                    </a>
                </div>
                <div class="col-sm-4 portfolio-item dontwantpadding leftShifted">
                    <a href="#portfolioModal5" class="portfolio-link" data-toggle="modal">
                        <div class="caption">
                            <div class="caption-content">
                                <i class="fa fa-search-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/kickinit.jpg" class="tri-Down img-responsive" alt="">
                    </a>
                </div>   

然后你需要将你的第二，第三和第四个元素转移到负边距，如下所示：

.col-sm-4.portfolio-item.dontwantpadding.leftShifted{
   margin-left: -130px;
}   

显然你需要调整行之间的边距 希望这有帮助

Answer 2

@Robjez我得到了它的工作！我最终使用下面的css来改变投资组合项目的位置。两行都得到了纠正。

.portfolio-item:first-child {
    position: relative;
    left: 15%;
}

.portfolio-item:last-child {
    position: relative;
    left: -15%;
}