Bootstrap 网格系统 - 如何使两列高度相等？ [复制]

Posted 2023-03-06

【中文标题】Bootstrap 网格系统 - 如何使两列高度相等？ [复制]

【英文标题】：Bootstrap grid system - how to make two columns with equal height? [duplicate]

【发布时间】：2017-02-08 16:41:40

【问题描述】：

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

.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"  />
  </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>

结果：

任何想法如何使右列的高度与左列相等？

【问题讨论】：

你试过了吗：getbootstrap.com.vn/examples/equal-height-columns？ - 顺便说一句漂​​亮的字体

@ThomasYates 是的尝试过，但没有用...

您需要将 CSS 添加到您的代码中。它不在原始引导程序中。我发布了一个答案。

【参考方案1】：

试试这个：

查看演示HERE

html：

<div class="row row-height">

  <div class="col-sm-6">
    <img src="http://placehold.it/400x600" class="img-responsive"  />
  </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; */

【讨论】：

在这个解决方案中，图像 div 中有一些额外的空间。是否可以删除该空间？

【参考方案2】：

将以下代码添加到您的 CSS：

.row-eq-height 
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

然后在您希望列具有相同高度的行上使用该类：

<div class="row row-eq-height">
    <div class="col-lg-6"></div>
    <div class="col-lg-6"></div>
</div>

就是这样。这是最干净且更官方的方式。

【讨论】：

使用这个解决方案可以在两个子 div 中提供额外的空间。知道如何删除它吗？

@AalindSharma 你能提供一个片段或屏幕截图吗？我不明白你的意思。

这种风格会干扰较小的分辨率，这意味着这些列在移动分辨率中不会相互融合。

@media (min-width: 768px) .row-eq-height display: flex;弹性包装：换行；