Bootstrap 4列中的全高div

Question

我想让所有.element处于同一高度，如果图像太小而不是全尺寸，则图像垂直对齐。 我尝试了很多东西，但我找不到解决方案

.element {
  border: 10px solid #e6e6e6;
  margin-bottom: 20px;
}
.element .inner {
  padding: 15px;
}
.element .inner p {
  margin-bottom: 5px;
  text-align: center;
}
.element a {
  background-color: #424753;
  color: #fff;
  display: block;
  height: 30px;
  padding-top: 3px;
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-3">
    <div class="element">
      <div class="inner">
        <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
        <p>Some text</p>
      </div>
      <a>Link</a>
    </div>
  </div>
  <div class="col-3">
    <div class="element">
      <div class="inner">
        <img class="img-fluid" src="http://www.gimmesomeoven.com/wp-content/uploads/2015/08/How-To-Make-Crepes-5.jpg" />
        <p>Some text</p>
      </div>
      <a>Link</a>
    </div>
  </div>
  <div class="col-3">
    <div class="element">
      <div class="inner">
        <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
        <p>Some text</p>
      </div>
      <a>Link</a>
    </div>
  </div>
  <div class="col-3">
    <div class="element">
      <div class="inner">
        <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
        <p>Some text</p>
      </div>
      <a>Link</a>
    </div>
  </div>
</div>

Answer 1

您可以在display: flex，flex-direction: column和flex: 1上添加element，inner和col-3。要使img居中，您可以使用margin-top和margin-bottom自动。

.col-3,
.element,
.inner {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.element {
  border: 10px solid #e6e6e6;
  margin-bottom: 20px;
}
.element .inner {
  padding: 15px;
}
.element .inner p {
  margin-bottom: 5px;
  text-align: center;
}
.element a {
  background-color: #424753;
  color: #fff;
  display: block;
  height: 30px;
  padding-top: 3px;
  text-align: center;
}
.element img {
  margin-top: auto;
  margin-bottom: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-3">
    <div class="element">
      <div class="inner">
        <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
        <p>Some text</p>
      </div>
      <a>Link</a>
    </div>
  </div>
  <div class="col-3">
    <div class="element">
      <div class="inner">
        <img class="img-fluid" src="http://www.gimmesomeoven.com/wp-content/uploads/2015/08/How-To-Make-Crepes-5.jpg" />
        <p>Some text</p>
      </div>
      <a>Link</a>
    </div>
  </div>
  <div class="col-3">
    <div class="element">
      <div class="inner">
        <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
        <p>Some text</p>
      </div>
      <a>Link</a>
    </div>
  </div>
  <div class="col-3">
    <div class="element">
      <div class="inner">
        <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
        <p>Some text</p>
      </div>
      <a>Link</a>
    </div>
  </div>
</div>

Answer 2

您可以使用新的Bootstrap 4 flexbox utilities并减少所有额外的CSS ..

http://www.codeply.com/go/LBkyWJzTrT

var boatChartData = {
  "id": "622",
  "name": "some name",
  "boats": {
    "637": {
      "id": "637",
      "name": "Subcat 1",
      "translations": null
    },
    "638": {
      "id": "638",
      "name": "Subcat 2",
      "translations": null
    }
  },
  "image": "73e043a7fae04b55855bede22da6286b"
};

var processedBoatChartData = [boatChartData].reduce(collectBoatChartData, {

  getBoatNameByKey: function (key) {
    return this[key].name;
  },
  boatNameList: [],
  chartItemTitleList: [],
//chartItemBoatNameList: [],
  chartItemBoatCountList: []
});

http://www.codeply.com/go/LBkyWJzTrT

Answer 3

你想要这样，只需添加位置样式。但是有了这个，你还必须编写媒体查询样式。

＆＃13;

＆＃13;

.element {
  border: 10px solid #e6e6e6;
  margin-bottom: 20px;
  height: 225px;
  position: relative;
}
.element .inner {
  padding: 15px;
}
.element .inner p {
  margin-bottom: 5px;
  text-align: center;
}
.element a {
  background-color: #424753;
  color: #fff;
  display: block;
  height: 30px;
  padding-top: 3px;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-3">
    <div class="element">
      <div class="inner">
        <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
        <p>Some text</p>
      </div>
      <a>Link</a>
    </div>
  </div>
  <div class="col-3">
    <div class="element">
      <div class="inner">
        <img class="img-fluid" src="http://www.gimmesomeoven.com/wp-content/uploads/2015/08/How-To-Make-Crepes-5.jpg" />
        <p>Some text</p>
      </div>
      <a>Link</a>
    </div>
  </div>
  <div class="col-3">
    <div class="element">
      <div class="inner">
        <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
        <p>Some text</p>
      </div>
      <a>Link</a>
    </div>
  </div>
  <div class="col-3">
    <div class="element">
      <div class="inner">
        <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
        <p>Some text</p>
      </div>
      <a>Link</a>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;