Question

我想在Bootstrap 3中为我的列设置相同的高度。我可以将行设置为＆＃39; display：table;＆＃39;或类似的东西导致它搞砸了一切的布局。

<article>

 <div id="post-<?php the_ID(); ?>"> <!-- just gets the post's id --> 

   <div class="row">

    <div class="col-md-8 indx-img" style="background-image:url('...');">
    </div>

    <div class="col-md-4 text-cell">
        <h1>title</h1>
        <h3>category</h3> 
    </div>

   </div><!-- /#row -->

 </div><!-- /#post -->

</article>

内容位于右侧，带有背景图像的列位于左侧。该列需要一个高度，以便显示背景图像，我希望将该高度应用于带有文本的列。

我希望它是响应高度，到目前为止我用的是

CSS

indx-img {
 padding: 16% 0;
}

问题是高度不会将该列与文本一起应用。最终目标是使两列具有相同的高度，文本垂直居中于＆＃39;文本单元格中。柱

Answer 1

如果您不能使用任何css解决方案，因为它们会破坏您的布局，您可以使用javascript。

这里我们定义一个名为resize的函数，它将遍历帖子。
如果页面大于断点，请将邮政容器的高度设置为图像的高度。然后将文本容器的高度设置为100％。

如果页面小于断点，请检查高度是否设置。如果是，我们删除高度设置以允许自然膨胀和收缩。

我们在页面加载时调用resize函数一次，然后将其分配给窗口调整大小处理程序

（Demo）

<script type="text/javascript">
    window.onload = function() {
        (function () {
            "use strict";
            var resize = function () {
                var posts = document.querySelectorAll('[id^="post"] .row'), post;
                for (var i = 0; post = posts[i]; i++) {
                    if (window.innerWidth > 768) {
                        post.style.height = post.firstElementChild.offsetHeight + 'px';
                        if(post.lastElementChild.style.height !== '100%') {
                            post.lastElementChild.style.height = '100%';
                        }
                    } else {
                        if(post.style.height !== '')
                            post.style.height = '';
                    }
                }
            };
            window.onresize = resize;
            resize();
        })();
    }
</script>

Answer 2

我一直使用matchHeight插件来解决这类问题，它与Bootstrap完美配合。

只需安装插件，在您的col-md-8和col-md-4列中添加matchHeight类：

  <div class="matchHeight col-md-8 indx-img" style="background-image:url('...');">
</div>

<div class="matchHeight col-md-4 text-cell">
    <h1>title</h1>
    <h3>category</h3> 
</div>

并将以下内容添加到您的javascript：

$('.matchHeight').matchHeight();

然后，您可以在整个网站中使用此修复程序，只需重复上述步骤，甚至可以在同一页面上多次执行此操作（它会自动调整到当前＆＃34; row＆＃34;元素内，如果您有3行6个元素然后只有任何给定行中的那些元素的大小匹配。

希望在Bootstrap中设置相等的高度 - 无表

2 个答案: