使用 bootstrap 3 在 767px、991px、1199px 处分页

web page breaks at 767px, 991px, 1199px using bootstrap 3

我正在做一个项目,我的网页在 767px、991px 和 1199px 处中断,我不知道为什么会这样。我正在使用 bootstrap 3.3.7 并且在我的项目中使用 hidden-* classed 的地方中间有一个图像并且左右还有另外两列,我遇到了这个问题.现在我不知道是因为 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 id="logo-header" 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,通常是移动优先设计。您可以检查这些断点并按照下面的 bootstrap 文档应用它们。

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,在设置media query或者类似的小问题。

注意:我根据我在之前项目中的经验分享这个建议,我们使用的是 ReactStrap,我注意到媒体查询没有按照 min 的正确约定设置和最大宽度。

它不能正常工作的原因是因为在我的项目中使用了 hidden-* Bootstrap-3 预定义 类。

所以我决定删除它们,而不是使用 CSS 媒体查询,它没有任何副作用,不像越野车,有风险 Bootstrap 类 和他们的网格系统像这种情况在某些时候可能会是个大麻烦。

所以最后我的代码从你上面看到的变成了这个:

@media (max-width: 265px) {
    #logo-header {
        display: none;
    }
}

请记住,我们不再需要那些 hidden-* 类。

这样你实际上可以选择你的布局应该改变什么屏幕尺寸,你有更多的自由,你也不会遇到这个问题。只需使用 CSS 媒体查询,一切都会好起来的。