Making two different rows in bootstrap have same-h

问题:

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

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.

回答1:

Well you need to add 4th item then with class col-sm-4 portfolio-item dontwantpadding with extra class ie. leftShifted. Apply same class to 2nd and 3rd column so you'll have col-sm-4 portfolio-item dontwantpadding leftShifted.
Your markup will look:

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

Then you need to shift your 2nd, 3rd and 4th element with negative margin, like so:

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

Obviously you need to adjust your margins between rows.
Hope this help

回答2:

@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%;
}