Question

我使用bootstrap显示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：

.apps .app .content {
  padding: 10px 15px;
  min-height: 250px;
}

这是JSBin。

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

然而，当屏幕有点狭窄时，它们的高度不同：

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

Answer 1

基本上，这就是你想要的东西

小提琴： https://jsfiddle.net/ec8Lbuvj/2/

您正在搜索flexbox。我不使用你的标记，但这是你应该怎么做的。是时候分析代码了。只需将display flex放到父元素上即可。

.parent {
    display: flex;
}

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

注意：此技术在IE 8及更低版本中不起作用。干杯。希望它有所帮助。

我使用了媒体查询，因为这是bootstrap的工作方式。

Answer 2

您可以设置固定高度或使用jQuery Match Height之类的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>

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

将3个项目的高度并排放置

2 个答案: