内行 - 在自定义 VC 元素上垂直对齐

问题描述

我在 Visual Composer (WP Bakery) 中有一个内行,其中有 5 列 - 每列都有一个图像或图标。我需要将此内行垂直对齐到页面底部(整页部分:联系人),并且“演讲台”按钮和“发送消息”按钮需要具有相同的宽度并且彼此垂直对齐:

.MyButtons {
    align-items: center!important;
    min-width: 15%!important;
    margin-left: 0px!important;
}

行 ID:“底部 ID” CSS 类:“底层”

我在以下 CSS 中使用了自定义 ID 和 CSS 类

div#bottom-id {
    width: 100%!important;
    position: fixed;
    height: max-content!important;
    bottom: 0;
}


<div id="bottom-id" class="grve-row-inner grve-bookmark vc_custom_1611171241574 bottom-class">
        <div class="grve-column-inner wpb_column grve-column-1-5">
            <div class="grve-column-wrapper-inner">
            
    <div class="wpb_single_image wpb_content_element vc_align_center">
        
        <figure class="wpb_wrapper vc_figure">
            <div class="vc_single_image-wrapper   vc_Box_border_grey"><img class="vc_single_image-img " src="https://neue.run-time.co.za/wp-content/uploads/2020/11/cropped-Neue-Fund-logo-50x50.jpg" width="50" height="50" alt="cropped-Neue-Fund-logo.jpg" title="cropped-Neue-Fund-logo.jpg"></div>
        </figure>
    </div>

            </div>
        </div>
    
        <div class="grve-column-inner wpb_column grve-column-1-5">
            <div class="grve-column-wrapper-inner">
            <div class="grve-element grve-single-icon grve-align-center grve-small grve-animated-item grve-fade-in-up grve-duration-normal grve-animated" style="" data-delay="200"><a href="http://linkedin/" target="_blank">  <div class="grve-wrapper-icon grve-no-shape" style=""><i class="fab fa-linkedin-in grve-text-black"></i></div></a></div>
            </div>
        </div>
    
        <div class="grve-column-inner wpb_column grve-column-1-5">
            <div class="grve-column-wrapper-inner">
            <div class="grve-element grve-single-icon grve-align-center grve-small grve-animated-item grve-fade-in-up grve-duration-normal grve-animated" style="" data-delay="200"><a href="https://angel.co/company/neue-fund" target="_blank"><div class="grve-wrapper-icon grve-no-shape" style=""><div id="grve-svg-6008896f6ab6b" data-file="https://neue.run-time.co.za/wp-content/uploads/2020/11/angellist.svg" data-duration="100" class="grve-svg-icon grve-text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" version="1.1" width="100%" height="100%"><path d="M12.813 4a2.177 2.177 0 0 0-.938.156c-.578.235-.973.746-1.156 1.25-.184.504-.235 1.02-.219 1.563.027 1.086.3 2.297.625 3.468.266.961.57 1.86.844 2.626a2.106 2.106 0 0 0-1.531.313c-.782.503-1.254 1.304-1.344 2.061-.082.68.078 1.297.281 1.844-.54.055-1.066.235-1.469.625-.644.63-.906 1.547-.906 2.625 0 3.551 1.89 5.633 3.906 6.563 2.016.93 4.133.906 4.938.906.875 0 2.894-.074 4.75-1.344 1.855-1.27 3.406-3.781 3.406-8 0-.363.273-1.992-.75-3.375-.219-.297-.516-.562-.844-.812.2-.653.676-2.227 1.063-4.188.238-1.21.426-2.441.406-3.5-.012-.531-.059-1.02-.25-1.5s-.652-1.02-1.281-1.156a2.595 2.595 0 0 0-1.813.281c-.52.293-.902.715-1.25 1.188-.691.949-1.203 2.144-1.593 3.343-.133.41-.235.817-.344 1.22a30.267 30.267 0 0 0-.563-1.47c-.5-1.21-1.086-2.402-1.812-3.312-.364-.457-.762-.86-1.281-1.125a2.27 2.27 0 0 0-.876-.25zm-.157 1.969c.024.004.059.027.125.062.133.067.371.278.625.594.504.633 1.067 1.691 1.531 2.813A32.076 32.076 0 0 1 16.188 13h-.062c-.7 0-1.34.29-1.781.719a34.35 34.35 0 0 1-1.313-3.813c-.3-1.09-.511-2.187-.531-2.969-.012-.39.043-.703.094-.843.023-.07.035-.086.031-.094.012-.004.02-.031.031-.031zm9 .156h.125c.04.14.086.355.094.688.016.785-.152 1.921-.375 3.062a42.477 42.477 0 0 1-.906 3.688 11.265 11.265 0 0 0-1.907-.407 27.61 27.61 0 0 1 .907-3.594c.355-1.093.812-2.14 1.281-2.78.234-.321.457-.532.625-.626.055-.031.11-.031.156-.031zM16.125 15c3.688 0 5.043.844 5.531 1.5.489.656.344 1.336.344 2.156 0 3.754-1.21 5.442-2.531 6.344-1.32.902-2.899 1-3.625 1-.797 0-2.59-.023-4.094-.719-1.504-.695-2.75-1.843-2.75-4.75 0-.75.203-1.11.313-1.218.109-.11.218-.153.593-.063.606.145 1.668.875 2.656 2.188.231.304.442.632.657 1-.063.074-.25.187-.375.187-.153 0-.297-.047-.563-.281-.265-.235-.59-.684-.937-1.219l-1.688 1.094c.39.605.785 1.148 1.281 1.593.497.446 1.165.813 1.907.813.765 0 1.441-.355 1.906-.906.121-.14.14-.348.219-.532.144.41.312.786.5 1.063.422.621.937.938.937.938L17.5 23.53s-.148-.07-.375-.406-.469-.883-.469-1.75c0-.313.047-.566.157-.781.18-.352.496-.594.843-.813.559-.351 1.125-.468 1.125-.468.446-.098.77-.489.785-.946a1.003 1.003 0 0 0-.722-.992s-1.586-.473-2.844-.844a.613.613 0 0 1-.281-.187c-.043-.07-.078-.149-.125-.219a1.154 1.154 0 0 1-.063-.5.804.804 0 0 1 .188-.469c.086-.094.156-.156.406-.156zm-4.625.031c.043-.027.047-.027.281.063.235.09.61.332 1 .719.781.773 1.621 2.066 2.156 3.437.126.32.098.398.063.469-.035.07-.133.168-.313.25a1.56 1.56 0 0 1-.593.125c-.156-.004-.133-.133.062.125l-.062.031c-.598-.824-1.211-1.496-1.875-2 0 0-.614-.73-.938-1.531-.164-.403-.219-.805-.187-1.063.031-.258.066-.406.406-.625z" id="surface1" style="stroke-dasharray: 196,198; stroke-dashoffset: 0;"></path><Metadata></Metadata></svg></div></div></a></div>
            </div>
        </div>
    
        <div class="grve-column-inner wpb_column grve-column-1-5">
            <div class="grve-column-wrapper-inner">
            <div class="grve-element grve-text footer-links vc_custom_1611172187198 grve-animated-item grve-fade-in-up grve-duration-normal grve-animated" data-delay="200">
            <p class="footer-links" style="text-align: center;"><a href="https://neue.run-time.co.za/#" target="_blank">Privacy Policy</a></p>

        </div>
    
            </div>
        </div>
    
        <div class="grve-column-inner wpb_column grve-column-1-5">
            <div class="grve-column-wrapper-inner">
            <div class="grve-element grve-text footer-links vc_custom_1610431193370 grve-animated-item grve-fade-in-up grve-duration-normal grve-animated" data-delay="200">
            <p class="footer-links" style="text-align: center;"><a href="https://neue.run-time.co.za/#" target="_blank">Terms of Service</a></p>

        </div>
    
            </div>
        </div>
    </div>

但是,在加载时,该行的 CSS 类不断更改为不同的“vc_custom_#######”类名,然后我的自定义 css 代码未实现

grve-row-inner grve-bookmark vc_custom_1611171241574 底层

Link to site

所需的布局(但全宽为白色)和两个按钮宽度相同且彼此垂直对齐

Desired Effect but with full width white background

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...