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就像（在這里建議）：

style.css

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

之后，我嘗試將<div class="row">替換為<div class="row equal">但是什么也沒有發生：列的高度仍然不同。 我還嘗試將style.css的第一行設置為.row.equal{但還是沒有運氣。

我正在使用FireFox ver。 53.打開開發人員工具時，可以看到以下display: flex; 在我的CSS被忽略（這是排除在外）。 我想這與flexbox有關，但是我是新手，我真的不知道如何解決這個問題。

我還按照建議創建了一個bootply 。 希望它能幫助理解我的觀點。

Answer 1

我猜flex屬性正在被bootstrap類覆蓋，可以通過自定義CSS中的'！important'來解決。

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

但是您可以通過刪除預定義的縮略圖類並以自己的方式設置樣式來簡化代碼。 將您的父類顯示為flex並將您的孩子顯示為“ stretch”（高度等於父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> 

Answer 2

列的高度相等，但是列內的縮略圖未填充高度。 只要設定高度...

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

.thumbnail {
  height: 100%;
}

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