Создание столбцов WordPress одинакового размера - PullRequest
Новая
       19

Создание столбцов WordPress одинакового размера

0 голосов
/ 29 октября 2018

Я работаю над сайтом 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]

1 Ответ

0 голосов
/ 29 октября 2018

Я обновил этот ответ рабочим решением. Пожалуйста, следуйте инструкциям ниже.

Как установить одинаковую высоту столбцов в Visual Composer?

1. Настройки VC

Чтобы столбцы в строке были равны высоте, необходимо перейти к окну параметра Строка и установить флажок Равная высота , чтобы быть активным. Все столбцы в этом ряду будут иметь одинаковую высоту и совпадать с самым длинным столбцом.

VC Equal Height Columns

Источник: База знаний WPBakery Page Builder

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

выход Equal columns output

...