使 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 项，然后添加 class col-sm-4 portfolio-item dontwantpadding 以及额外的 class 即。 leftShifted。将相同的 class 应用于第 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%;
}

使 bootstrap 中的两个不同行具有相同高度的元素

Making two different rows in bootstrap have same-height elements

html

css

image

twitter-bootstrap

whitespace