Question

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

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

Answer 1

您的页面有以下标记：

<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>

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

该代码将是：

.container

您可以在相关页面上以文本模式将该代码添加到WYSIWYG的底部。但请注意，如果该页面上有任何其他div具有相同的班级<script> jQuery( document ).ready(function() { jQuery( "div .no-container" ).addClass( "container" ); jQuery( "div .no-container" ).removeClass( "no-container" ); }); </script>，那么他们也会受到影响，并且您要定位的div可能会在其中包含其他布局效果添加其他内容和/或元素。当我使用我的检查员申请课程时，它确实完美无缺。

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

.no-container

其中<script type="text/javascript" src="{the_file_path}/mycustomscript.js"></script>指向您上传文件的位置。最后，文件中的代码如下所示：

{the_file_path}

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

1 个答案: