Bootstrap 3中缩略图列的高度相同

Question

我一直在阅读很多关于如何在同一行中拥有相同高度列的答案，但在我的情况下似乎没有一个。我知道解决方案可能真的很愚蠢，但我无法弄清楚...... 所以，首先我创建了一个 style.css 并以这种方式将它导入到我的 index.php 中（我还包括我实际使用的其他样式参考以及下面代码的重要部分）：

index.php

<link rel="stylesheet" href="./static/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
...
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">
      <div class="thumbnail">
        <img src="./img/animazione.jpg" alt="Animazione" style="width:100%">
        <div class="caption">
          <h2>Some text COL2</h2>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="thumbnail">
        <img src="./img/rinnovabili.jpg" alt="Rinnovabili" style="width:100%">
        <div class="caption">
          <h2>Some text COL2</h2>
        </div>
     </div>
   </div>
   <div class="col-md-4">
      <div class="thumbnail">
        <img src="./img/rugby.jpg" alt="Rugby" style="width:100%">
        <div class="caption">
          <h2>Some text COL3</h2>
       </div>
      </div>
    </div>
  </div>

我的 style.css 是这样的（建议here）：

style.css

.equal {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

之后，我尝试将<div class="row"> 替换为<div class="row equal">，但什么也没发生：各列的高度仍然不同。我还尝试将 style.css 的第一行设置为.row.equal{，但仍然没有运气。

我正在使用 FireFox 版本。 53. 当我打开开发者工具时，我可以看到我的 css 中的display: flex; 被忽略（已排除）。我猜是和flexbox有关的东西，但是我是新手，真的不知道怎么解决这个问题。

我还按照建议创建了一个bootply。希望它有助于理解我的观点。

Answer 1

列的高度相同，但列内的缩略图未填充高度。只需设置高度...

.row.equal {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  height: 100%;
}

.thumbnail {
  height: 100%;
}

https://www.bootply.com/8wQiUUKL53

Answer 2

我猜 flex 属性被引导类覆盖，可以通过自定义 css 中的 '!important' 来解决。

.target-class{
   display: flex !important;
}

但是您可以通过删除预定义的缩略图类并以您自己的方式对其进行样式化来简化代码。 将您的父类显示为 flex 并将您的子类显示为“拉伸”（将使高度等于父 div 的高度）。

.parent {
  background: lightgrey;
  display: flex;
}

.child {
  align-items: stretch;
  flex: 1;
  background: #fff;
  margin: 10px;
  padding-top: 10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <div class="parent">

        <div class="col-xs-4 child">

          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSj8ddwNjLjFB_PoOLhcXHdZUbyCk0ZbhSYi1Vzf2nZo4qDiA2h" style="width:100%">

          <div class="caption">
            <h2>Some text COL2 some text</h2>
          </div>

        </div>

        <div class="col-xs-4 child">

          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSj8ddwNjLjFB_PoOLhcXHdZUbyCk0ZbhSYi1Vzf2nZo4qDiA2h" style="width:100%">

          <div class="caption">
            <h2>Some text COL2 some more text</h2>
          </div>

        </div>

        <div class="col-xs-4 child">

          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSj8ddwNjLjFB_PoOLhcXHdZUbyCk0ZbhSYi1Vzf2nZo4qDiA2h" style="width:100%">

          <div class="caption">
            <h2>Some text COL3</h2>
          </div>

        </div>

      </div>
    </div>
  </div>
</div>