Html 并排放置时，对齐3个项目的高度

我使用引导显示3个项目。当屏幕很窄时（例如，在智能手机中），它们会垂直地一个接一个地显示。当屏幕较大时，我希望它们并排显示在一行中。这三个项目没有相同的文本，但我希望它们在一行中时始终具有相同的高度。我使用以下代码：

<section id="apps" class="apps section">
  <div class="container">
    <div class="row">
      <div class="col-md-4 col-sm-4 col-xs-12">
        <div class="app">
          <div class="content">
            ...
          </div><!-- content -->
        </div><!-- app -->
      </div><!-- col -->
    <div class="row">
      <div class="col-md-4 col-sm-4 col-xs-12">
        <div class="app">
          <div class="content">
            ...
          </div><!-- content -->
        </div><!-- app -->
      </div><!-- col -->
    <div class="row">
      <div class="col-md-4 col-sm-4 col-xs-12">
        <div class="app">
          <div class="content">
            ...
          </div><!-- content -->
        </div><!-- app -->
      </div><!-- col -->
    </div>
  </div>
</section>

这是你的电话号码

当屏幕非常大时，上述CSS允许3个项目具有相同的高度：

但是，当屏幕有点窄时，它们的高度不同：

---

有人知道当它们并排时如何始终对齐吗？

基本上，这是您想要的

小提琴：

您正在搜索flexbox。我不使用您的标记，但以下是您应该如何使用它。是时候分析代码了。只需将displayflex放在父元素上

.parent {
    display: flex;
}

.child {
    width: 30%;
    // don't put min-height. It will be automatic
}

注意：这种技术在IE8及更低版本中不起作用。干杯希望有帮助

---

我使用了媒体查询，因为这就是引导的工作方式

您可以设置一个固定的高度，也可以使用jQuery插件来确保高度始终相同

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>

<script type="text/javascript">
if( $(window).width() >= 768px ){ //preventing this from running on mobile device, 768px is bootstrap's breakpoint for col-sm-4
        $('.components-class-name').matchHeight();
    }
</script>

如果（$（window）.width（）>=768px）{//阻止此操作在移动设备上运行，则768px是col-sm-4的引导断点
$（'.components类名'）.matchHeight（）；
}

---

但这将使组件在移动模式下具有相同的高度

框中的复制长度是否会改变？你知道最大长度吗？什么是“拷贝长度”？我不明白你的问题…抄袭只是另一种表达文字的方式。长度是我自己写的文字的数量，所以它们不是随机的文字。假设最大长度为300个字符？好的。。。我忘了提到我仍然想使用引导。换句话说，在智能手机中，这3个项目将一个接一个地垂直显示，我想保留这一点。你也可以不使用引导来实现它。因此，flex和bootstrap的结合也很好。如果你想要的话。我可以为你编码。如果你能提供bootstrap+flex的答案，那就太好了。。。谢谢你…@SoftTimur我更新了笔。看看，你当然可以。您只需要在其他断点中声明它。看看媒体查询。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>

<script type="text/javascript">
if( $(window).width() >= 768px ){ //preventing this from running on mobile device, 768px is bootstrap's breakpoint for col-sm-4
        $('.components-class-name').matchHeight();
    }
</script>