Avada主题引发问题与引导程序断点

问题描述：

我使用Avada 5.0.6，它似乎是破坏我的引导程序网格的断点。移动响应中断点为800像素宽。但是，根据bootstrap文档，col-sm- *以768像素开始。所以当我模拟800px宽的屏幕时，我的网格仍然可以工作。但事实并非如此，它将两个div放在了一起（底部的图片）。Avada主题引发问题与引导程序断点

我的HTML：

<div class="col-xs-12 col-sm-3 col-md-3 phonenumbers"> 
    <h2>Phone numbers:</h2> 
    <p>555-555-555</p> 
    <p>555-555-555</p> 
    </div> 
    <div class="col-xs-12 col-sm-3 col-md-3 email"> 
    <h2>Email:</h2> 
    <p>[email protected]</p> 
    <p>[email protected]</p> 
    </div> 
    <br> 
    <div class="col-xs-12 col-md-12"> 
    <h1>Connect with Us!</h1> 
    <p></p> 
    [contact-form-7 id="23" title="Contact Us Form"] 
    </div>

我的CSS：

.phonenumbers { 
    margin-left: 35%; 

} 
.email { 
    margin-left: 10%; 
} 

    @media (max-width: 800px) { 
     .phonenumbers { 
     margin-left: 0; 
     } 
     .email { 
     margin-left: 0; 
     } 
    }

的桌面外观：

移动的样子：

它的工作原理，当你删除阿瓦达索主题？ – xszaboj

当我用普通的HTML和媒体查询做它时，它确实有效。 –

电话号码+电子邮件将在左侧，并在右侧联系？这是你想要的？ –

答

在Avada中，您可以调整所有内容，包括断点。它的默认值与Bootstrap的768px不匹配，它是800px。你可以很容易地改变它：

在WP管理员边栏选择阿瓦达索
选择主题选项
在Fusioon阿瓦达索5.0.6左侧菜单中选择响应
调整标题响应断点和/或网站内容响应断点与范围选择您的需要。

我做到了，仍然是同样的问题。 –

答

试试这个

<div class="col-xs-3 col-sm-3 col-md-3 phonenumbers"> 
    <h2>Phone numbers:</h2> 
    <p>555-555-555</p> 
    <p>555-555-555</p> 
    </div> 
    <div class="col-xs-3 col-sm-3 col-md-3 email"> 
    <h2>Email:</h2> 
    <p>[email protected]</p> 
    <p>[email protected]</p> 
    </div> 
    <br> 
    <div class="col-xs-12 col-md-12"> 
    <h1>Connect with Us!</h1> 
    <p></p> 
    [contact-form-7 id="23" title="Contact Us Form"] 
    </div>

直播的jsfiddle https://jsfiddle.net/grinmax_/uqpdb6sL/

Avada主题引发问题与引导程序断点

相关推荐