Bootstrap - 搞砸了@media和溢出问题

Question

https://jsfiddle.net/537wen91/

我正在使用 Bootstrap，在示例中，如果您使 html 视图变宽，滚动条会消失，而当视图变窄时，滚动条会出现。这就是我想要的。当我处于“窄视图”时，问题就开始了：向下滚动到灰色框，现在展开 html 视图，看看滚动条是如何消失的（好），但我也丢失了顶部的文本（不好）。为什么我顶部的文字不见了？

编辑澄清

它的工作方式是：在页面加载时 - 不要滚动到任何地方并拉伸屏幕，以便您在一行中看到所有彩色列。您会在顶部看到一些文本，在底部看到列，没有滚动条。应该是这样的。

这样它不会：刷新页面。向下滚动到粉红色的列。现在拉伸它，使所有彩色列出现在一行上。看到我在顶部的文字消失了吗？为什么？

如果还是不清楚，我就得录屏了……

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
             <h2>title</h2>

        </div>
        <div class="col-md-4">
             <h2>title</h2>

            <p>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et ultrices neque, vel vestibulum turpis. In ex nunc, vulputate at quam vitae, ultrices vestibulum velit. Phasellus lorem orci, maximus vitae tristique a, sollicitudin sed mauris. Donec ipsum nibh, pulvinar quis nulla at, cursus congue odio. Cras accumsan sem erat, volutpat elementum ante accumsan sed.</p>
        </div>
        <div class="col-md-4">
             <h2>title</h2>

            <p>bbb</p>
        </div>
        <div class="col-md-2">
             <h2>title</h2>

            <p>bbb</p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
             <h2>title</h2>

        </div>
    </div>
    <div id="see" class="row">
        <div class="col-md-2" style="background-color: #FFC;">...</div>
        <div class="col-md-2" style="background-color: #CCC;">...</div>
        <div class="col-md-2" style="background-color: #CCC;">...</div>
        <div class="col-md-2" style="background-color: #FC9;">...</div>
        <div class="col-md-2" style="background-color: #CCF;">...</div>
        <div class="col-md-2" style="background-color: #CCF;">...</div>
    </div>
</div>
<nav class="navbar navbar-fixed-bottom">
    <p>Place sticky footer content here.</p>
</nav>

CSS

html {
    /*position: relative;
    min-height: 100%;*/
    height: 100%;
}
body {
    overflow: hidden;
}
#see > div {
    height: 1200px;
}
.navbar {
    margin-bottom: 0;
    min-height: inherit;
}
nav {
    background-color: #222;
    color: #666;
}
@media (max-width: 992px) {
    body {
        overflow: auto;
    }
    #see > div {
        height: 500px;
    }
}

JS

$(window).bind('resize load', function () {
    if ($(this).width() <= 992) {
        $('nav').removeClass('navbar-fixed-bottom');
    } else {
        $('nav').addClass('navbar-fixed-bottom');
    }
});

Answer 1

尝试替换：

body { overflow: hidden; }

与

body { overflow: auto; }

关于溢出值的更多信息：http://www.w3schools.com/cssref/pr_pos_overflow.asp

Answer 2

如上所述，问题在于#see div 改变了宽度而不是高度，并且当页面滚动时，滚动保持，将文本留在视口之外。像这样的东西（请原谅我糟糕的 MSPaint 技能）：

一种可能的解决方案是在进行更改之前滚动到页面顶部，因此文本始终可见。只需添加一行代码即可实现：

$(window).scrollTop(0);

你可以在这里看到它的工作原理：https://jsfiddle.net/537wen91/12/

---

一种可能的纯 CSS 解决方案是，如果文本高度不变，则为 #see div 添加高度 calc(100% - HEIGHT_OF_TEXT)。但我没试过。

Answer 3

您可能需要使用 Bootstrap 的网格布局来定义不同视图大小的情况：http://getbootstrap.com/css/#grid
在您的班级中，为这些定义网格大小： .col-xs- .col-sm- .col-md- .col-lg-

在你的类中添加 hidden-xs 以隐藏在超小，或在中等视图中隐藏，等等（在下面的 Fiddle 中，如果你使结果窗口的宽度足够窄，你会看到这个发生，

当您使用较小的屏幕尺寸时，假设您想显示两个“标题”元素而不是四个，您可以将 HTML 更改为：

<div class="row">
   <div class="hidden-xs col-md-2">
   <div class="col-xs-6 col-md-4">
   <div class="col-xs-6 col-md-4">
   <div class="hidden-xs col-md-2">
</div>

这使得在较小的屏幕上，只有中间的两个元素将显示，因为它们将占据网格的所有 12 列。或者你可以在较小的视图上做到这一点。这是一个小提琴：https://jsfiddle.net/1dtnd59s/1/

基本上，必须调整不同显示尺寸的列选项，如果您可以在小型显示器上隐藏某些元素，那将更容易。