Question

我正在使用Avada 5.0.6，似乎正在破坏我的自举网格的断点。移动响应性断点宽度为800像素。但是，根据bootstrap文档，col-sm- *从768像素开始。因此，当我模拟800px宽的屏幕时，我的网格仍然可以工作。但事实并非如此，它将两个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。您可以轻松更改它：

在 WP管理侧栏中选择 Avada
选择主题选项
在Fusioon Avada 5.0.6左侧菜单中选择自适应
调整标头响应断点和/或网站内容响应断点，并根据您的需要选择范围。

Answer 2

试试这个

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

Live JsFiddle https://jsfiddle.net/grinmax_/uqpdb6sL/

Avada主题导致Bootstrap断点问题

2 个答案: