Bootstrap 3中縮略圖列的高度相同

我一直在閱讀很多關於如何在同一行中具有相同高度列的答案，但似乎沒有一個適用於我的情況。我知道解決方案可能是非常愚蠢的，但我無法弄清楚它... 因此，首先我創建了一個style.css並將其導入到我的index.php中（我還包含其他樣式參考使用和下面的代碼的重要部分）：Bootstrap 3中縮略圖列的高度相同

的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 equal">替換<div class="row">，但沒有發生任何事情：列仍然是不同的高度。我也嘗試將style.css的第一行設置爲.row.equal{，但仍然沒有運氣。

我正在使用FireFox版本。 53.當我打開開發者工具時，我可以看到我的css中的display: flex;被忽略（它被排除）。我想這與flexbox有關，但我是新手，我真的不知道如何解決這個問題。我建立了bootply。希望這將有助於理解我的觀點。

來源

2017-05-29 umbe1987

這是（第一次，希望工程）。 https://www.bootply.com/axLGNXY9yI#。還添加了問題。 – umbe1987

的列是相同的高度，但列內的縮略圖不灌裝高度。只需設置高度...

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

.thumbnail { 
    height: 100%; 
}

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

來源

2017-05-30 02:19:59 ZimSystem

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

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

來源

2017-05-29 22:46:53

Bootstrap 3中縮略圖列的高度相同

回答

相關問題