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中缩略图列的高度相同

回答

相关问题