在引导程序中使两个不同的行具有相同高度的元素答案

【问题标题】：Making two different rows in bootstrap have same-height elements在引导程序中使两个不同的行具有相同高度的元素
【发布时间】：2015-03-23 02:28:13
【问题描述】：

我问了一个类似的问题，我将删除，因为这个问题专门针对我真正的问题：使它们具有相同的高度。

我在引导程序中有两个不同的行，一个有 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>

图像本身是正方形，但它们被隐藏在三角形中。我在下面附上了一张图片。

【问题讨论】：

这是一个奇怪的问题。你的问题到底是什么？你有小提琴吗？
@robjez 感谢您的回复，我尝试设置一个 JS 小提琴，但有太多交织在一起的 css 使它在那里可行。但是我将在我的 github 上托管一个网站：cammac7.github.io 如果你向下滚动到“投资组合”，你会看到我的问题。
那么，你需要将你的底行设置为 4 个三角形，尺寸比顶部的小，不是吗？

标签： html css image twitter-bootstrap whitespace

【解决方案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;
}

显然您需要调整行之间的边距。
希望对您有所帮助

【讨论】：

robjez，感谢您的回复，但不幸的是，您的修复对我不起作用。出于某种原因，CSS 中的负边距会被任何浏览器划掉。我现在只有 6 个元素（顶部 3 个底部的 3 个）会影响此方法的成功吗？
嗯。必须是覆盖它的 CSS 规则之一。我记得你在你的一个类中添加了一些 !important （dontwantpadding？）。您可以按照我向您展示的方式进行设置（底部有 4 列），以便我可以查看网络检查器吗？我确定这是特异性问题。
我确实在 dontwantpadding 类中添加了一些 !important，但即使我删除了这些，我仍然无法让三角形更接近。另外，我想只保留 3 和 3，因为我认为这样更干净

【解决方案2】：

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

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

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

【讨论】：