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

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

.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

你想要这样吗，刚刚添加了位置样式。但是有了这个你还必须写 media-query 样式。

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

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

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

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

    <div class="row">
        <div class="col-3">
            <div class="element d-flex h-100 flex-wrap justify-content-between">
                <div class="inner d-flex flex-wrap align-self-center justify-content-center">
                    <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg">
                    <p>Some text</p>
                </div>
                <a href class="align-self-end w-100">Link</a>
            </div>
        </div>
        <div class="col-3">
            <div class="element d-flex h-100 flex-wrap justify-content-between">
                <div class="inner d-flex flex-wrap align-self-center justify-content-center">
                    <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 href class="align-self-end w-100">Link</a>
            </div>
        </div>
        <div class="col-3">
            <div class="element d-flex h-100 flex-wrap justify-content-between">
                <div class="inner d-flex flex-wrap align-self-center justify-content-center">
                    <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg">
                    <p>Some text</p>
                </div>
                <a href class="align-self-end w-100">Link</a>
            </div>

        </div>
        <div class="col-3 align-items-center">
            <div class="element d-flex h-100 flex-wrap justify-content-between">
                <div class="inner d-flex flex-wrap align-self-center justify-content-center">
                    <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg">
                    <p>Some text</p>
                </div>
                <a href class="align-self-end w-100">Link</a>
            </div>
        </div>
    </div>

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

Bootstrap 4 列中的全高 div

Full height div in Bootstrap 4 columns

css

twitter-bootstrap

flexbox

bootstrap-4

twitter-bootstrap-4