Bootstrap:如何获取一列的高度为另一列的100% [英] Bootstrap: How to get a column with 100% the height of another column

查看:352
本文介绍了Bootstrap:如何获取一列的高度为另一列的100%的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有这样的结构:
(这是bootstrap 3,但它应该与版本2.x相同)

I have this kind of structure: (this is bootstrap 3 but it should be the same with version 2.x)

漂亮的基本东西,看起来像一张桌子。我想要在右边的col-lg-4具有与左边col-lg-8相同的大小。我尝试style =最小高度:100%(显然没有工作,因为我在这里问)。我一直在做一些研究,但大多数人要求同一个问题,希望他们的整个内容是100%的页面。我想这是100%的左div在同一行。我甚至不知道为什么它不工作,100%应该应用于外部行的高度,这是我需要的确切的高度(外部行没有填充,图像看起来像这样更好的概述的网格)

Pretty basic stuff, looking like a table. I want this col-lg-4 on the right to have the same size as the col-lg-8 on the left. I tried style="min-height: 100%" (which obviously didn't work since I'm asking here). I've been doing some research, but most of the people asking for the same issue want their whole content to be 100% of the page. I want this to be 100% of the left div in the same row. I don't even get why it's not working, the 100% should apply to the height of the outer row, which is the exact height that I need (the outer row has no padding, the image just looks like this for a better overview of the grid)

推荐答案

如果你熟悉jQuery ...这对我来说在过去。

If you are familiar with jQuery...This has worked for me in the past. Just pass the group of colomns to this function.

function equalHeight(group) {
   tallest = 0;
   group.each(function() {
       thisHeight = $(this).height();
       if(thisHeight > tallest) {
          tallest = thisHeight;
       }
   });
   group.height(tallest);
}

使用这样...

$(document).ready(function(){
    equalHeight($('.cols'));
});

这篇关于Bootstrap:如何获取一列的高度为另一列的100%的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆