html - 相同高度的元素 - bootstrap

Question

我想让列表中的所有元素具有相同的高度，即使其中一个元素中有更多文本，如果其他元素可以调整，那就太好了。我使用过 div，但改成 li 没问题，实际上我正在寻找如何以最佳方式解决此问题的建议。

我正在使用 twitter-bootstrap，为了说明我的问题，我准备了示例 https://jsfiddle.net/f2vwvsgu/1/

<div class='container'>
  <div class='row'>
    <div class='col-sm-4 col-xs-12'>
      <div class='img'>
        <img src='http://lorempixel.com/image_output/nature-q-g-707-400-2.jpg' class='img-responsive' />
      </div>
      <div class='description'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed commodo sapien, vitae congue velit.
      </div>
    </div>
    <div class='col-sm-4 col-xs-12'>
      <div class='img'>
        <img src='http://lorempixel.com/image_output/nature-q-g-707-400-2.jpg' class='img-responsive' />
      </div>
      <div class='description'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed commodo sapien, vitae congue velit.
      </div>
    </div>
    <div class='col-sm-4 col-xs-12'>
      <div class='img'>
        <img src='http://lorempixel.com/image_output/nature-q-g-707-400-2.jpg' class='img-responsive' />
      </div>
      <div class='description'>
        Lorem ipsum dolor sit amet
      </div>
    </div>
    <div class='col-sm-4 col-xs-12'>
      <div class='img'>
        <img src='http://lorempixel.com/image_output/nature-q-g-707-400-2.jpg' class='img-responsive' />
      </div>
      <div class='description'>
        Lorem ipsum dolor sit amet
      </div>
    </div>
    <div class='col-sm-4 col-xs-12'>
      <div class='img'>
        <img src='http://lorempixel.com/image_output/nature-q-g-707-400-2.jpg' class='img-responsive' />
      </div>
      <div class='description'>
        Lorem ipsum dolor sit amet
      </div>
    </div>
    <div class='col-sm-4 col-xs-12'>
      <div class='img'>
        <img src='http://lorempixel.com/image_output/nature-q-g-707-400-2.jpg' class='img-responsive' />
      </div>
      <div class='description'>
        Lorem ipsum dolor sit amet
      </div>
    </div>    
  </div>
</div>

Answer 1

在没有 JS 的情况下在 bootstrap 或 CSS 中执行此操作只有通过一些 flexbox-tweaks 才有可能，这将需要另一种方法来处理网格。查看 CSS-Flexbox，绝对值得。

为了帮助解决我们的问题，我编写了一个简短的脚本来以最少的标记更改获得所需的结果。您只需要添加:

<div class='container js-equalize-container'>

<div class='col-xs-4 js-equalize-target'>

https://jsfiddle.net/685f822q/

简短说明:脚本的作用:它将所有高度设置为“自动”，寻找最高的高度，并使用 js-equalize-target-class 将此高度应用到每个元素。