Bootstrap网格系统-如何制作两根等高的柱子? [英] Bootstrap grid system - how to make two columns with equal height?

问题描述

如何在Bootstrap网格列中使两列具有相同的高度?

How can I make two columns having the same height in Bootstrap grid columns?

.item-text {
  padding: 30px !important;
  /* Flex center. */
  display: flex;
  align-items: center;
  vertical-align: middle;
  justify-content: center;
  border: 1px solid blue !important;
}
.item-text .item-center {
  align-self: center;
  margin: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-xl-4 col-lg-6 col-sm-12">
  <div class="col-sm-6">
    <img src="http://placehold.it/400x600" class="img-responsive" alt="" />
  </div>
  <div class="col-sm-6 item-text">
    <div class="item-center">
      <h3 class="heading item-heading">(Title) Ways of Something</h3>
      <p class="item-contributor">John Berger</p>
      <p class="item-description">(Short description) Remix-remake of John Berger’s 1972 BBC documentary, Ways of Seeing</p>
    </div>
  </div>
</div>

结果:

有什么想法可以使右列的高度等于左列的高度?

Any ideas how to make the right column's height equal as the left one?

推荐答案

尝试一下:

检查演示 此处

Check Demo HERE

HTML:

<div class="row row-height">

  <div class="col-sm-6">
    <img src="http://placehold.it/400x600" class="img-responsive" alt="" />
  </div>
  <div class="col-sm-6 item-text">
    <div class="item-center">
      <h3 class="heading item-heading">(Title) Ways of Something</h3>
      <p class="item-contributor">John Berger</p>
      <p class="item-description">(Short description) Remix-remake of John Berger’s 1972 BBC documentary, Ways of Seeing</p>
    </div>
  </div>

</div>

CSS:

.row-height {
  display: flex;
}

.item-text {
  padding: 30px !important;
  /* Flex center. */
  display: flex;
  align-items: center;
  vertical-align: middle;
  justify-content: center;
  border: 1px solid blue !important;
}

.item-text .item-center {
  /*  align-self: center;
    margin: auto; */
}

这篇关于Bootstrap网格系统-如何制作两根等高的柱子?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！