Question

我在两个不同的列中有一个带有两个Jumbotron的行，我想让两个jumbotron具有相同的高度，响应地匹配最高的高度。

<div class="row">
        {% if project.has_member_responses %}
    <div class="col-8">
        <div class="jumbotron greenback box-shad">
            <h4>Welcome to the Project test "{{  project.name }}" Detail page</h4>
        </div>
    </div>
    <div class="col-4">
      <div class="jumbotron doughnut greenback score-box box-shad">
        <div class="score-title">
          <h4>Team Score</h4>
        </div>
        <div class="chart" data-percent="66">
          <div class="score-text">
              <span>77</span>

          </div>

        </div>

我尝试使用Jquery尝试在网上找到但没有成功：

$(document).ready(function() {

  var jumboMaxHeight = 0

  $(".jumbotron").each(function(){
    if ($(this).height() > jumboMaxHeight) {
      jumboMaxHeight = $(this).height() }
    })

  $(".jumbotron").height(jumboMaxHeight)

})
  </script>

我该怎么办？

Answer 1

您可以使用易于使用的jquery.matchheight.js库。您需要做的就是将css类应用于您希望根据它们的最大高度匹配高度的colomns示例

<div class="col-xs-6 same-height">...

然后在该css类上调用matchHeight（）函数。

$('.same-height').matchHeight();

这是一个codepen示例，向您展示matchheight.js库和没有matchheight.js库。您可以使用cdn或下载js文件并将其包含在项目中。

https://codepen.io/Nasir_T/pen/mXewYW

希望这有帮助。

Answer 2

你不应该把一个jumbotron放在行和列中，它本身已经是一个完整的“行”。

我认为Bootstrap的卡片更适合你想要达到的目的，顺便说一句，如果放入卡片组，它们可以制成相同的高度：https://getbootstrap.com/docs/4.0/components/card/#card-groups

Jumbotron响应匹配高度

2 个答案: