引导列到相同的高度和孩子匹配高度 [英] Bootstrap columns to same height AND child to match height

问题描述

正如标题所暗示的，我试图获得你的正常< table> 提供的均匀性和干净的行，但是具有Bootstrap Grid System的响应性。我已使用部分解决方案在此处找到 ，以使列彼此匹配彼此的高度。

As the title implies, I'm trying to get the uniformity and clean lines that your normal <table> offers, but with the responsiveness of Bootstrap Grid System. I've used the partial solution found here, to get the columns to match each other's height.

这里是我的布局在JSFiddle （大致）。蓝色边框用于列以相同的高度显示它们。

Here's my layout in JSFiddle (roughly). Blue border is for the columns to show them at same height.

事情是，内部div与高度不匹配。右边的部分将是一个聊天室，所以textarea是一个固定的高度，以及标题，所以我想让消息区域占据额外的高度。我似乎不能得到 display：flex 在那里工作。

The thing is, the inner divs are not matching the height. The right section is going to be a chatroom, so the textarea is a fixed height, as well as the header, so I'm trying to get the message area to take up the extra height. I can't seem to get display:flex to work there.

我不介意如果解决方案是在Javascript或CSS，只要它是响应。

I don't mind if the solution is in Javascript or CSS, just as long as it is responsive.

此外，如果你认为我应该设置列具有内部 divs 并为它们添加一个边距，它似乎不工作。感谢您的帮助，我很感激！

Also, in case you think that I should just set the columns to have the style of the inner divs and add a margin to them, it doesn't seem to work. Thanks for the help, I appreciate it!

推荐答案

我相信我已经想出来了。希望人们检查这些链接，如果他们遇到相同的问题。 ：）

I believe I've figured it out. Hope people check these links if they run across the same problem. :)

顶级解决方案

Prime solution

次要解决方案

Secondary Solution

这篇关于引导列到相同的高度和孩子匹配高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！