html - 动态 Bootstrap 井

标签 html css twitter-bootstrap

我有一个模板,可以获取从外部程序生成的所有信息。我试图让这个模板更现代一点,而不是 1992 年。

用于处理表格的页面。它看起来不太好,所以我试图移除 table ,让屏幕上的所有内容都流畅。

对于文本的容器,我使用了 Bootstrap well类(class)。问题是如果一口井比另一口井长一点,它看起来很奇怪。我需要两个 <div class="well">如果最高的是高度。

我已经尝试用很多不同的 CSS 来做到这一点。我真的不想回到餐 table 旁。

代码如下。

<div class="col-md-12">
    <div class="col-md-6">
        <div class="well">
        <h3>Heading</h3>
        Info                             
    <br>
        <br>
        </div>
    </div>
    <div class="col-md-6">
        <div class="well">
        <h3>Heading</h3>
        Info                             
    <br>
        <br>
        </div>
    </div>
</div>

感谢任何帮助。

最佳答案

所以您想要的是 div 的 高度必须等于具有大量数据的 div...

尝试使用 jquery。

var maxHeight = Math.max.apply(null, $(".well").map(function ()
{
   return $(this).outerHeight();
}).get());

$('.well').height(maxHeight);

检查一下: https://jsfiddle.net/x3ehq57g/2/

关于html - 动态 Bootstrap 井,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35691462/

相关文章:

html - 为什么我不能将这两个 div 并排对齐?

twitter-bootstrap - 无法访问 Selenium Webdriver 中的 Bootstrap 模式对话框

html - 导航到其他页面时搜索文本框跳转

html - 如何从左右两侧平均定位元素?

html - 用于从浏览器使用 HTTP PUT 上传文件的网页

html - 将下拉项显示为导航项而不是弹出列表

html - 如何布局图像,使其位于广告空间的左侧,但使用 flexbox 居中

html - 在 flex 元素中垂直和水平居中文本

jquery - 打开/关闭时图像变化

css - SCSS 过渡属性覆盖