在bootstrap中创建两个不同的行具有相同高度的元素 [英] Making two different rows in bootstrap have same-height elements

问题描述

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

I asked a similar question that I'll go delete because this one specifically focuses on my true issue: making them the same height.

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

I have two different rows in bootstrap, one with 3 divs (images) and one with 4 divs (also images). The images are the exact same shape and aspect ratio (rectangular), but I want them to stay the same size. Basically, I want the second row of elements to move closer (maybe by overlapping rows) so that all the elements are the same size as the top row.

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

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

The images themselves are squares, but they are masked in triangles. I included a picture below.

推荐答案

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

@Robjez I got it to work! I ended up using the below css to shift the positions of the portfolio-items in. Both rows got corrected.

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

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

这篇关于在bootstrap中创建两个不同的行具有相同高度的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！