Question

我已经在一个WordPress网站上工作了几个小时，但我一生无法解决这个问题。我的页面上连续有4列，它们的大小取决于内容。我需要所有4个大小相同。我已经为每个列添加了一个类，并尝试在CSS中手动设置高度，但是没有任何变化。这是我的项目的VC代码。我的col-height类是否甚至定位到正确的位置？如果是，我的CSS应该如何实现这一目标？感谢您的帮助！

[vc_row]
    [vc_column width="1/4" icons_position="left" el_class="col_height"]
        [vc_cta h2="Handguns" add_button="bottom" btn_title="Learn More"]Info.[/vc_cta]
    [/vc_column]
    [vc_column width="1/4" icons_position="left" el_class="col_height"]
        [vc_cta h2="Bladed Objects" add_button="bottom" btn_title="Learn More"]Info.[/vc_cta]
    [/vc_column]
    [vc_column width="1/4" icons_position="left" el_class="col_height"]
        [vc_cta h2="Rifles" add_button="bottom" btn_title="Learn More"]Info.[/vc_cta]
    [/vc_column]
    [vc_column width="1/4" icons_position="left" el_class="col_height"]
        [vc_cta h2="Incendiary Devices" add_button="bottom" btn_title="Learn More"]<p>[/vc_cta]
    [/vc_column]
[/vc_row]

Answer 1

我已使用工作解决方案更新了此答案。请按照以下步骤操作。

如何在Visual Composer中将列设置为相等的高度？

1。 VC设置

为了将行中的列设置为相等的高度，必须导航到 Row （行）参数窗口并选中 Equal height （相等的高度）选项以处于活动状态。该行中的所有列都将具有相等的高度，并与最长的列对齐。

来源：WPBakery Page Builder Knowledge Base

2。页面内的VC代码

[vc_row equal_height="yes" el_id="lh-custom"]
    [vc_column width="1/4" icons_position="left"]
        [vc_cta h2="Handguns" add_button="bottom" btn_title="Learn More" el_class="col_height"]Info.[/vc_cta]
    [/vc_column]
    [vc_column width="1/4" icons_position="left"]
        [vc_cta h2="Bladed Objects" add_button="bottom" btn_title="Learn More" el_class="col_height"]Info.[/vc_cta]
    [/vc_column]
    [vc_column width="1/4" icons_position="left"]
        [vc_cta h2="Rifles" add_button="bottom" btn_title="Learn More" el_class="col_height"]Info.[/vc_cta]
    [/vc_column]
    [vc_column width="1/4" icons_position="left"]
        [vc_cta h2="Incendiary Devices" add_button="bottom" btn_title="Learn More" el_class="col_height"]<p>&nbsp;</p>[/vc_cta]
    [/vc_column]
[/vc_row]

3。 functions.php中的jQuery代码

function lh_vc_same_height_cols() {
    ?>
        <script type="text/javascript">
            jQuery(document).ready(function() {
                jQuery(document).ready(function() {
                    var maxHeight = -1;

                    jQuery('#lh-custom .col_height').each(function() {
                        maxHeight = maxHeight > jQuery(this).height() ? maxHeight : jQuery(this).height();
                    });

                    jQuery('#lh-custom .col_height').each(function() {
                    jQuery(this).height(maxHeight);
                });
            });
        });
        </script>
    <?php
}
add_action( 'wp_footer', 'lh_vc_same_height_cols' );

来源：WPMU DEV Forum

输出

使WordPress列大小相同

1 个答案:

如何在Visual Composer中将列设置为相等的高度？