并排对齐3个项目的高度

Question

I use bootstrap to display 3 items. When the screen is narrow (eg, in a smartphone), they are displayed one after another vertically. When the screen is large, I want them to be displayed side by side in one row. The 3 items do not have same text, but i want them to ALWAYS have the same height when they are in one row. I use the following code:

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

And the CSS:

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

Here is the JSBin .

The above CSS allows the 3 items to have the same height when the screen is very large:

However, when the screen is a little bit narrow, they don't have the same height:

Does anyone know how to always align them when they are side by side?

Answer 1

Basically, here's what you want

Fiddle: https://jsfiddle.net/ec8Lbuvj/2/

You are searching for flexbox. I don't use your markup but here's how you should do it. It's time for you to analyze your code. Just put display flex to the parent element.

.parent {
    display: flex;
}

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

Note: This technique doesn't work in IE 8 and lower. Cheers. Hope it helped.

I used media queries because this is how bootstrap work.

Answer 2

You can either set a fixed height or use jQuery plugin like jQuery Match Height to make sure that the heights are always the same.

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

But this will make the components same height in mobile mode