Question

我使用bootstrap来设置我的wordpress网站的样式。我有一个代码，包含一个容器div，一行和3列内容，当每列从wordpress（或数据库）获取数据时，每列的高度是其内容的高度。

我想要的是3列具有相同的高度，基于最高列。我尝试添加display：table;到容器，显示：table-row;到行，并显示：table-cell;每列，但它仍然无法正常工作。

我的代码：

<div class="container-fluid" id="page-body">
    <div class="row pull-right">
        <div class="col-sm-7 pull-right page-content-wrapper">
            <div class="page-content">
                <?php echo the_content(); ?>
             </div>
        </div>
        <div class="col-sm-3 pull-right page-products-wrapper">
            <div class="">
                test
            </div>
        </div>  
        <div class="col-sm-2 pull-right side-menu-wrapper">
            test 2
        </div>      
    </div>
</div>

我的css是：

#page-body{
    display: table;
    width: 100%;
    margin-top: 40px;
    direction: rtl;
    padding-right: 9.5%;
    padding-left: 9.5%;
}

#page-body .row{
    width:100%;
    display: table-row;
}

.page-content-wrapper, .page-products-wrapper, .side-menu-wrapper{
    display: table-cell;
}

.page-content-wrapper{
    border-right: 1px solid #BE1621;
    border-left: 1px solid #BE1621;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.page-content{
    background: #dadada; /* Old browsers */
    background: -moz-linear-gradient(left,  #dadada 0%, #ffffff 50%, #dadada 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #dadada 0%,#ffffff 50%,#dadada 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #dadada 0%,#ffffff 50%,#dadada 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dadada', endColorstr='#dadada',GradientType=1 ); /* IE6-9 */
    padding: 25px 10px 25px 10px;
    font-size: 22px;
}

.page-products-wrapper{
    border-left: 1px solid #BE1621;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

我在这里看不到什么应该让它不起作用，但由于某种原因它不会...... 任何帮助，将不胜感激。

提前致谢，加比。

Answer 1

这可以通过使用flexbox来实现。首先，删除您添加的表属性，然后将此行添加到行类：

.row {
   display: flex;
}

如果您想使用表格，请添加以下内容：

.row {
   display: table;
}
[class~="col-"] {
   display: table-cell;
}

我强烈建议您使用flexbox，但这取决于您要查找的浏览器支持。

Answer 2

使用迄今为止提供的有效技术修改Bootstrap是一项有风险的业务，除非您对媒体查询有信心仅在预期的屏幕尺寸上应用这些样式。在这种情况下，我将使用JavaScript来应用一个等于最高列的内联高度 - 使用以下JS将jsEqualHeight类应用于每个col-：（注意媒体查询）

＆＃13;

if (jQuery) {
    (function ($) {
        "use strict";
        $(document).ready(function () {

            $(window).on('resize', function () {
                equalHeights();
            });

            equalHeights();

            function equalHeights() {
                if (window.matchMedia("(min-width: 992px)").matches) {

                    var elementHeights = $('.jsEqualHeight').map(function () {
                        return $(this).height();
                    }).get();

                    // Math.max takes a variable number of arguments
                    // 'apply' is equivalent to passing each height as an argument
                    var maxHeight = Math.max.apply(null, elementHeights);

                    // Set each height to the max height
                    $('.jsEqualHeight').height(maxHeight);
                } else {
                    $('.jsEqualHeight').css({ "height": "auto" });
                }
            }
        });
    }(jQuery));
}

＆＃13;

boostrap和wordpress - 3列相同的高度

2 个答案: