Question

我创建了一个Bootstrap响应网格。只要所有列的高度相同，网格就可以正常工作。如果一个或多个列的高度不相等，则整个布局都会混乱。

I have created a jsfiddle so you may see the problem alive and fix it. Thanks!

https://jsfiddle.net/DTcHh/5523/

Answer 1

您可以从以下标记手动设置固定宽度值：

<div class="product-thumb transition" style="height: ___px;">

或者只是从CSS文件中添加width属性：

.product-thumb {
     height: _____px;
}

Answer 2

如果你不害怕使用JavaScript我只是编写了基于jQuery的脚本，它处理父元素中子元素的相等高度。据我测试，Chrome浏览器工作正常，IE浏览器从6 - 11，Firefox，Safari。脚本不依赖于固定的高度值。完全响应，在窗口重新调整大小和不同断点上的内容更改时工作正常。确保儿童元素没有高度。脚本完全可以满足我的需求，但我还在测试。

HTML：

<div class="container">
    <div class="column">
        <h1>Title One</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque accumsan enim dui, quis posuere arcu luctus non. Pellentesque ut tortor quis diam volutpat imperdiet.</p>
    </div>
    <div class="column">
        <h1>Title Two</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque accumsan enim dui, quis posuere arcu luctus non.</p>
    </div>
    <div class="column">
        <h1>Title Three</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque accumsan enim dui, quis posuere arcu luctus non. Pellentesque ut tortor quis diam volutpat imperdiet. In hac habitasse platea dictumst.</p>
    </div>
</div>

CSS：

body {
    margin: 0;
    font-family: arial;
}

h1 {
    font-size: 28px;
    margin: 0;
    text-align: center;
    margin-top: 20px;
}

p {
    padding: 20px;
    line-height: 28px;
}
.container {
    margin: 0 auto;
    margin-top: 200px;
    max-width: 960px;
    height: auto;
}

.column {
    text-align: center;
    margin-right: 1%;
    margin-left: 1%;
    width: 31.33%;
    float: left;
    background-color: red;
}

jQuery的：

function equalHeight(parent) {
    function innerFunction() {
        var columns = $(parent).children();
        var maxContentHeight = -1;

        columns.each(function() {

            // Wrap content of every column in additional div
            $(this).wrapInner('<div class="inner-height"></div>');

            // Find the value of highest content from all columns
            var content = $('.inner-height', $(this));
            var contentHeight = content.height();

            if(maxContentHeight < contentHeight) {
                maxContentHeight = contentHeight;
            }

        });

        // Select the talest column and add class to it
        columns.each(function() {
            var content = $('.inner-height', $(this));
            var contentHeight = $('.inner-height', $(this)).height();

            if(contentHeight === maxContentHeight) {
                $('.inner-height', $(this)).parent().addClass('talest');
            }
        });

        // Get height of the highest column
        var talestColumn = $('.talest').height();

        // Calculate remaining space of the column
        var remainingHeight = talestColumn - maxContentHeight;

        // Set same height to all columns
        columns.each(function() {
            if($(this).hasClass('talest')) {
                // Set height auto for the talest column
                $(this).css('height', 'auto');
            } else {
                // Set height of the talest column to the rest of the column
                $(this).css('height', maxContentHeight + remainingHeight);
            }
        });
    }

    $(document).ready(function() {
        innerFunction(parent);
        $(window).resize(function() {
            // Remove class from talest column on window resize
            $('.talest').removeClass('talest');
            innerFunction(parent);
        });
    });
}

equalHeight('.container');

如何使用不等高度的列修复Bootstrap响应网格？

2 个答案: