如何在 Bootstrap 行中获得最高的 div

Question

我想为 Bootstrap 行内的最高 div 应用边框。以下是我的代码（例如）：

<section>
    <div class="row">
        <div class="col-md-6">
            <strong><span style="color:#f77f00;">TIP 1:</span> blahblahblah</strong>
            <p>dnijengeinjkdngkjdfnsdmnvjkgnkjnvjkerngeiuj <br/>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="col-md-6">
            <div class="embed-responsive embed-responsive-16by9">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/4ZT2AXgGzAU?start=77" frameborder="0" allowfullscreen class="embed-reponsive-item"></iframe>
            </div>
        </div>
    </div>
</section>

在某些情况下，Youtube 视频 DIV (class="col-md-6") 最高，而在其他情况下，文本 div (class="col-md-6") 最高。 （例如，当您在平板电脑上查看时）

确定最高 div 的最佳解决方案是什么，找出它在哪一侧（左/右）并向左或右应用边框（取决于它在哪一侧）？

这是我的意思的一个例子。

如您所见，中间线并非一直到底部。我希望它一直到底部，我找到了解决方案：

section {
    padding: 30px;
    border: 1px solid gray;
    margin-bottom: 45px;
}

section .row {
    border: 1px solid gray;
}

section .row > div:last-of-type {
    border-left: 1px solid gray;
}

section .row > div:only-child {
    border-left: 0;
}

@media (max-width: 991px) {
    section .row > div:last-of-type {
        border-left: 0;
    }
}

但这仅适用于右侧的 div 高于左侧的 div（如您在示例中所见）

如果我的问题不清楚或不完整，请告诉我。

编辑：为什么我的帖子被否决了？我不明白为什么。

Answer 1

这里是jsfiddle。

在页面加载时，我们调用函数findHighestDiv()。

window.onload = findHighestDiv();

我们正在循环使用类 row 的每个元素。

const findHighestDiv = () => {
  let rows = document.querySelectorAll('.row');
  for (let i = 0; i < rows.length; i++) {
  }
}

在每一行中，我们有两个 div：text 和 video。

const findHighestDiv = () => {
  let rows = document.querySelectorAll('.row');
  for (let i = 0; i < rows.length; i++) {
    const textDiv = rows[i].querySelectorAll('.text');
    const videoDiv = rows[i].querySelectorAll('.video');
  }
}

要获取此 div 的 height，我们使用 offsetHeight。

const findHighestDiv = () => {
  let rows = document.querySelectorAll('.row');
  for (let i = 0; i < rows.length; i++) {
    const textDiv = rows[i].querySelectorAll('.text');
    const videoDiv = rows[i].querySelectorAll('.video');
    const textDivHeight = textDiv[0].offsetHeight;
    const videoDivHeight = videoDiv[0].offsetHeight;
  }
}

然后我们比较它们得到highest height并使用style.borderRight或style.borderLeft设置边框。

const findHighestDiv = () => {
  let rows = document.querySelectorAll('.row');
  for (let i = 0; i < rows.length; i++) {
    const textDiv = rows[i].querySelectorAll('.text');
    const videoDiv = rows[i].querySelectorAll('.video');
    const textDivHeight = textDiv[0].offsetHeight;
    const videoDivHeight = videoDiv[0].offsetHeight;
    if (textDivHeight >= videoDivHeight) {
      textDiv[0].style.borderRight = '1px solid gray';
    } else {
      videoDiv[0].style.borderLeft = '1px solid gray';
    }
  }
}

抱歉，帖子内的 sn-p 不起作用，不知道为什么 :(

Answer 2

对两个 div 使用 display:table-cell。这样他们就永远是一样的高度。

.row {
  display:table
 }

.col-md-6 {
  display:table-cell
}

Answer 3

你可以试试这个脚本。它使您的列均衡化，因此您可以为任何列提供边框，没关系。您也可以将它放在一个函数中，并在每次调整窗口大小时使用它。我没有时间测试它，因为我很匆忙地输入了这个，但它应该可以工作。

$('section').each(function(index, element) {
        var leftColumnHeight = $(element).find('.row .col-md-6:first-child').height();
        var rightColumnHeight = $(element).find('.row .col-md-6:last-child').height();

        if(rightColumnHeight > leftColumnHeight){
            $(element).find('.row .col-md-6:first-child').height(rightColumnHeight);
        }

        if(leftColumnHeight > rightColumnHeight){
            $(element).find('.row .col-md-6:last-child').height(leftColumnHeight);
        }
    });

编辑：

我不能发表评论，但我会在这里说，您可以将此脚本修改为一个函数，并在任意多的行上使用它。例如，您可以为要均衡的列添加一个额外的类，例如：

<div class="col-md-6 equal-column"> 

并将脚本更改为此，因此它适用于任何列，而不仅仅是 col-md-6：

 $('section').each(function(index, element) {
            var leftColumnHeight = $(element).find('.row .equal-column:first-child').height();
            var rightColumnHeight = $(element).find('.row .equal-column:last-child').height();

            if(rightColumnHeight > leftColumnHeight){
                $(element).find('.row .equal-column:first-child').height(rightColumnHeight);
            }

            if(leftColumnHeight > rightColumnHeight){
                $(element).find('.row .equal-column:last-child').height(leftColumnHeight);
            }
        });