Html 如何使引导列在一行中具有相同的高度？

这是我的网站的引导，基本上我希望cols col-lg-6的高度相同，这样我在它们里面的图像是均匀的，目前，一个图像延伸到另一个图像之下

编辑：当前版本

尝试取出您的

<h1 class="text-center"> Where do we cater to? </h1>

我们在哪里提供服务？

因为一行加起来就是12。现在，这一行中有h1和两个col-lg-6，它们应该在自己的一行中（6+6=12）

---

h1应该在自己的行中，带有自己的col-lg-12，或者您可能想要的任何东西。

您是否尝试使用

最大高度：

这是你的代码分支

在列中添加另一行，并添加刚刚添加的

高度固定类

一个
max height
属性，可以根据需要设置为任何值

编辑
如果图像太小，还可以将其与
最小高度
结合使用

内容应该放在列中，并且只能放在列中
行的直接子代

因此，从
.row
中取出
h1
，并将class
.row eq height
设置为
.row
，如下所示：

.row-eq-height{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

<div class="row row-eq-height"></div>


我们在哪里吃饭？
只需将“等高”类添加到父列中即可

$('.equal-heights').each(function(){  
    var highestBox = 0;
    $(this).children('[class*="col-"]').each(function(index, el){
        if( $(el).height() > highestBox ) highestBox = $(el).height();
    });  
    $(this).children('[class*="col-"]').css('height',highestBox);
});

html将是这样的

<div class="row equal-heights">
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
</div>


...
...
...

这是一个带有图像的响应网格。图像容器高度相等，图像本身垂直居中


.grid{
边缘顶部：25px；
显示器：flex；
柔性包装：包装；
}
.grid>[class*='col-']{
显示器：flex；
弯曲方向：立柱；
对齐项目：拉伸；
边缘底部：15px；
}
.电网img{
保证金：自动0；
}
@介质（最大宽度：767px）{
.集装箱{
最大宽度：100%；
}
}
@介质（最大宽度：575px）{
.集装箱{
最大宽度：100%；
左侧填充：0；
右边填充：0；
}
.posts网格>[class*='col-']{
左侧填充：5px；
右侧填充：5px；
}
}

我尝试过该解决方案的可能副本，但对meI无效。我已将h1移动到新行，它似乎对col-lg-12中图像的高度没有影响。图像仍应位于各自的col-lg-6（一行）中，但h1应位于自己的col-lg-12（另一行）中。我的错，我现在已经完全做到了，它仍然和以前一样。当你说我可以将最大高度设置为我需要的值时，我是否可以在css中设置它。col-log-6{max-height:100%；}，我是把它设为百分比还是px？是的，把它设为列，这就是为什么我添加了类
高度固定
，所以你只是扩展了列类，而不是直接编辑它，是的，使用px这里有一些关于它的信息，这似乎没有改变任何东西，即使我将最大高度设置为1px，图片仍会保留在页面上。您必须将图片所在的列设置为
max height
。将最大高度设置为。col-lg-6是它们所在的列，我尝试了各种高度，但它们保持不变。编辑：当我使用style=覆盖它时，图像消失这似乎只会将一个图像的大小减少1x1像素，并将另一个图像的宽度减少1像素或少量that@TheNoob我添加了一个小片段来说明两个
col-
具有相同的高度，让我知道这是否对你有效。这似乎可以使列的高度相等，但我如何使我的图像填充整个列？另外，使用xs而不是lg有什么好处？答案取决于你想要实现什么，有很多答案，看看这些：，，我最终想要的是图像如何在该站点上并排排列，中间没有空格，并延伸到页面边缘。这个屏幕截图应该有助于显示我的意思，因此正确的图像是紫色区域的大小，因此列之间没有空间，请注意，实际的图像要大得多，当放入列中时，似乎正在缩小