使 WordPress 列大小相同

Question

我已经在一个 WordPress 网站上工作了几个小时了，我这辈子都弄不明白。我的页面上连续有 4 列，它们的大小取决于内容。我需要所有 4 个大小相同。我在每个列中添加了一个 class 并尝试在 CSS 中手动设置高度，但没有任何变化。这是我的项目的 VC 代码。我的 class 或 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 设置

为了将一行中的列设置为等高，您必须导航到行参数 window 并选中等高选项被激活。此行中的所有列将具有相同的高度并与最长的列对齐。

来源：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。 jQuery 里面的代码 functions.php

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 列大小相同

Making WordPress Columns Same Size

css

wordpress

visual-composer

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