使用引导程序 3 在 767 像素、991 像素、1199 像素处分页

如何解决使用引导程序 3 在 767 像素、991 像素、1199 像素处分页

我正在做一个项目，我的网页在 767px、991px 和 1199px 处中断，我不知道为什么会发生这种情况。我正在使用 bootstrap 3.3.7 并且在我的项目中使用 hidden-* 分类的地方，中间有一个图像，左右还有另外两列，我面临这个问题。现在我不知道是因为 hidden-* 类还是在中间列放了一张图片。如果你没有明白我的意思，看看这些代码：

<Meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1irsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>

<div id="#id">
    <div class="container-fluid">
        <div class="row">
            <div class="section-2">
                <div class="col-lg-5 col-md-6 col-sm-6 col-xs-12 section-2-left">
                    <ul>
                        <li class="fade-in-skills slide-in-skills">text</li>
                        <li class="fade-in-skills slide-in-skills">text</li>
                    </ul>
                </div>
                <div class="col-lg-2 hidden-md hidden-sm hidden-xs">
                    <img src="MyImageSrc" width="320" height="600">
                </div>
                <div class="col-lg-5 col-md-6 col-sm-6 col-xs-12 section-2-right">
                    <ul>
                        <li class="fade-in-skills slide-in-skills">text</li>
                        <li class="fade-in-skills slide-in-skills">text</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

我的CSS：

#id{
    background: rgba(168,198,222,.2);
    margin: 100px 50px 0;
    border-radius: 300px 15px 300px 15px;
    padding: 20px;
}

.section-2 ul {
    list-style: none;
    text-align: center;
}

.section-2 ul li {
    margin: 50px auto 0;
    opacity: 0;
    font-size: 1.6rem;
}

.section-2-right,.section-2-left ul li:last-child {
    margin-bottom: 50px;
}
.section-2 img{
    margin: 50px auto;
    display: block;
}

请记住，这只发生在上面提到的那些特定像素上。例如，768px 或 766px 没有问题等等......这对我来说很奇怪。感谢您的帮助。

解决方法

我建议您检查项目中应用的媒体查询。因为，这显然是您项目中设置的媒体查询的问题。

我们通常遵循移动优先设计或桌面优先设计。在引导程序中，它通常是移动优先设计。您可以检查这些断点并按照下面的引导程序文档应用它们。

Bootstrap-3.3 breakpoints

好像只是加断点的时候用错了。

让我举个例子：

假设媒体查询是为平板设备编写的，它看起来像：

@media and (min-width:768px) and (max-width:991px){ // Notice max-width is 991px and not 992px
  // Your CSS selectors
}

现在，请注意 max-width:991px，因此，在设置媒体查询或任何类似的小问题时，有可能将 992px 写在这里。

注意：我根据我在之前项目中的经验分享这个建议，我们使用的是 ReactStrap 并且我注意到媒体查询没有按照最小和最大宽度的适当约定设置。