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

Question

我一直在阅读有关如何在同一行中具有相同高度列的大量答案，但是在我的情况下似乎没有一个。我知道解决方案可能真的很愚蠢，但我无法弄清楚...因此，首先，我创建了一个样式。

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就像(在此处提出(：

style.css

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

之后，我尝试用<div class="row equal">替换<div class="row">，但没有发生任何事情：这些列仍然是不同的高度。我还尝试将我的style.css的第一行设置为 .row.equal{，但仍然没有运气。

我正在使用Firefox Ver。53.当我打开开发人员工具时，我可以看到我的CSS中的display: flex;被忽略(已排除在外(。我想这与flexbox有关，但我是一个新手，我真的不知道如何解决这个问题。

我还根据建议创建了一个引导。希望这将有助于理解我的观点。

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属性被bootstrap类所覆盖，可以通过自定义CSS中的'！

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

但是，您可以通过删除预定义的缩略图类并以自己的方式进行造型来简化代码。将您的父班显示为flex，并将您的孩子与"伸展"相符(将使高度等于父级的高度(。

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