html - Avada 主题导致 Bootstrap 断点问题

Question

我使用的是 Avada 5.0.6，断点似乎正在破坏我的 Bootstrap 网格。移动响应断点为 800 像素宽。然而，根据 bootstrap 文档 col-sm-* 从 768 像素开始。所以当我模拟 800 像素宽的屏幕时，我的网格应该仍然有效。但它没有，它将两个 div 放在彼此的顶部(底部的图片)。

我的 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>info@test.ca</p>
    <p>careers@test.ca</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;
      }
    }

桌面外观:

移动端外观:

Answer 1

在 Avada 中，您可以调整所有内容，包括断点。默认不匹配Bootstrap的768px，是800px。您可以轻松更改它:

1. 在 WP Admin Sidebar 中选择 Avada
2. 选择主题选项
3. 在 Fusioon Avada 5.0.6 左侧菜单中选择Responsive
4. 根据您的需要调整标题响应断点和/或网站内容响应断点范围选择。