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

我认为flex属性正在被引导类覆盖，并且可以通过＆＃39;！important＆＃39;来解决。在你的自定义CSS。

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

但您可以通过删除预定义的缩略图类并以自己的方式设置样式来简化代码。将您的父类显示为flex并将您的孩子视为＆＃39;伸展＆＃39; （将使高度等于父div的高度。）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

.thumbnail {
  height: 100%;
}

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

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

2 个答案: