Jumbotron响应匹配高度

时间:2018-02-01 15:08:20

标签: jquery css twitter-bootstrap

我在两个不同的列中有一个带有两个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>

我该怎么办?

2 个答案:

答案 0 :(得分:0)

您可以使用易于使用的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

希望这有帮助。

答案 1 :(得分:0)

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

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