使用Visual Composer创建新页面时，页面内容如何不对齐？

For some odd reason when I create a new page with Visual Composer my content doesn't align at all, however when I edit an existing page that came with a template It does. Video Demonstration:

出于某种奇怪的原因,当我使用Visual Composer创建新页面时,我的内容根本不对齐,但是当我编辑模板附带的现有页面时它确实如此。视频演示:

https://www.youtube.com/watch?v=Z1LFcmUs1tg

1 个解决方案

#1

Your page has the following markup:

您的页面有以下标记:

<div class="no-container stripe-video-content">
    <div class="vc_col-sm-8 wpb_column column_container  ">
        <div class="wpb_wrapper">
                    <h3 class="headline text-left underline  " style="color: #666666">
            About Us        </h3>

    <div class="wpb_text_column wpb_content_element ">
        <div class="wpb_wrapper">
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>

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

    <div class="vc_col-sm-4 wpb_column column_container  ">
        <div class="wpb_wrapper">
                    <h3 class="headline text-left  " style="color: #666666">
            Stuff we do best        </h3>
    <div class="vc_progress_bar wpb_content_element default small"><div class="vc_single_bar bar_grey"><small class="vc_label">Development</small><span style="width: 90%;" class="vc_bar" data-percentage-value="90" data-value="90"></span></div><div class="vc_single_bar bar_grey"><small class="vc_label">Design</small><span style="width: 80%;" class="vc_bar" data-percentage-value="80" data-value="80"></span></div><div class="vc_single_bar bar_grey"><small class="vc_label">Marketing</small><span style="width: 70%;" class="vc_bar" data-percentage-value="70" data-value="70"></span></div></div>

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

which was apparently written by Visual Composer. The problem is coming from the class on the enclosing div: no-container which isn't sufficient to trigger Bootstrap to take care of the responsiveness. Therefore, if you can't figure out how to use VC (I don't use it) to create a div with .container, then you can use jQuery to remove the .no-container and add .container.

这显然是由Visual Composer编写的。问题来自于封闭div上的类:无容器,这不足以触发Bootstrap来处理响应。因此,如果您无法弄清楚如何使用VC(我不使用它)来创建带.container的div,那么您可以使用jQuery删除.no-container并添加.container。

That code would be:

该代码将是:

<script>
jQuery( document ).ready(function() {
    jQuery( "div .no-container" ).addClass( "container" );
    jQuery( "div .no-container" ).removeClass( "no-container" );
});
</script>

You would add that code to bottom of the WYSIWYG, in text mode, on the page in question. Bear in mind, however, that if there are any other divs on that page with the same class .no-container, that they will also be affected and that the div you're targeting may then have other layout abberations within it if you add other content and/or elements. When I used my inspector to apply the class, it did come out perfect though.

您可以在相关页面上以文本模式将该代码添加到WYSIWYG的底部。但请记住,如果该页面上有任何其他div具有相同的类.no-container,那么它们也会受到影响,并且您要定位的div可能会在其中添加其他布局abberations其他内容和/或元素。当我使用我的检查员申请课程时,它确实完美无缺。

Also, please be aware that it's best practice to include your scripts by linking to external files. While you may be able to get away with not doing it in this case, if you want to and have the ability to FTP into the site, the code that goes in the WYSIWYG would look like:

此外,请注意,最佳做法是通过链接到外部文件来包含脚本。虽然在这种情况下您可能无法做到这一点,但如果您想要并且能够FTP进入网站,那么WYSIWYG中的代码将如下所示:

<script type="text/javascript" src="{the_file_path}/mycustomscript.js"></script>

where {the_file_path} points to wherever you upload the file. And finally the code in the file would look like this:

其中{the_file_path}指向您上传文件的位置。最后文件中的代码如下所示:

jQuery( document ).ready(function() {
    jQuery( "div .no-container" ).addClass( "container" );
    jQuery( "div .no-container" ).removeClass( "no-container" );
});

#1