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

Question

我正在做一个项目，我的网页在 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 没有问题等等......这对我来说很奇怪。我很感激任何帮助。

Answer 1

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

我们通常遵循移动优先设计或桌面优先设计。在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 的正确约定设置和最大宽度。

Answer 2

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

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

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

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

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

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

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

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

html

css

twitter-bootstrap

twitter-bootstrap-3

grid-system