css - Bootstrap 3 - 两列 - div 垂直对齐

Question

我有元素:
- box-1 和 box-2 是 col-1
- box-3 和 box-4 是 col-2

box 1, 2, 4 是文本，box-3 是图片。两列的高度不同。

如何强制 box-2 的垂直对齐以使 box-2 和 box-4 具有相同的底线？

此刻我发现了这个 js Sam152/Javascript-Equal-Height-Responsive-Rows ，所以我可以强制两列在同一高度。我不知道这一步是否正确。

这里是基本代码(没有js元素):

<div class="container">
            <div class="row">
                <!-- col 1 -->
                <div class="col-md-6">
                    <div id="box-1">
                        <h1>1<br>TEXT</h1>
                    </div>
                    <div id="box-2">
                        <h1>2<br>TEXT</h1>
                    </div>
                </div>
                <!-- col 2 -->
                <div class="col-md-6">
                    <div id="box-3">
                        <img src="http://lorempixel.com/480/360" />
                    </div>
                    <div id="box-4">
                        <a href="">
                            <h1>4<br>TEXT</h1>
                        </a>
                    </div>
                </div>
            </div>
        </div>

Answer 1

您基本上必须使 box-1 与 box-3 的高度相同。您可以使用 css 手动完成，也可以使用 jQuery 使 2 个 div 具有相同的高度。

<script>
    $(document).ready(function(){
        var Height = $('#box-3').height();
        $('#box-1').height(Height);
    });
</script>

确保您没有向 box-1 添加额外边距或填充的元素:

#box-1 * {
    margin: 0;
    padding: 0;
}

这将消除 box-1 中元素的所有填充和边距