bootstrap 和 wordpress - 3 列相同高度答案

【问题标题】：boostrap and wordpress - 3 columns same heightbootstrap 和 wordpress - 3 列相同高度
【发布时间】：2016-04-21 04:55:23
【问题描述】：

我正在使用引导程序来设置我的 wordpress 网站的样式。我有一个代码，其中包含一个容器 div、一行和 3 列内，当每列从 wordpress（或就此而言的 db）获取数据时，每列的高度是其内容的高度。

我想要的是 3 列具有相同的高度，基于最高的列。我尝试添加 display: table;到容器，显示：表行；到行，并显示：表格单元格；到每一列，但它仍然不起作用。

我的代码：

<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;
}

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

提前致谢，加比。

【问题讨论】：

每个最高 div 添加最小高度 aa
作为快速参考，您应该使用 Bootstrap 使用的推/拉类（例如 col-md-push-3）来更改 column ordering。

标签： html css wordpress twitter-bootstrap

【解决方案1】：

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

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));
}

【讨论】：

【解决方案2】：

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

.row {
   display: flex;
}

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

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

我强烈建议您使用 flexbox，但这取决于您正在寻找哪种浏览器支持。

【讨论】：