文章/答案/技术大牛

发布

问磁控管响应匹配高度
EN

Stack Overflow用户

提问于 2018-02-01 15:08:19

回答 2查看 322关注 0票数 0

在两个不同的列中，我和两个万象管发生了争吵，我想让这两台巨无霸管的高度一致，与最高的高度相匹配。

<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>

我该怎么做呢？

jquery

css

twitter-bootstrap

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-02-01 15:23:01

您可以使用易于使用的jquery.matchheight.js库。您所需要做的就是将css类应用到您想要根据它们的最大高度匹配高度的颜色中。

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

然后调用css类上的matchHeight()函数。

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

下面是一个代码依赖示例，向您展示是否有matchheight.js库。您可以使用cdn或下载js文件并将其包括在您的项目中。

T/pen/mXewYW

希望这能有所帮助。

票数 0

Stack Overflow用户

发布于 2018-02-01 15:48:40

您不应该在行和列中放置一个巨型加速器，它本身已经是一个完整的“行”。

我相信Bootstrap的卡更适合你想要达到的目标，顺便提一句，如果放在一个卡片组：https://getbootstrap.com/docs/4.0/components/card/#card-groups中，它们可以用相同的高度制作。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48565926

复制

相似问题

问磁控管响应匹配高度
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问磁控管响应匹配高度EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问磁控管响应匹配高度
EN