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

Question

我正在使用 Bootstrap，在这个例子中，如果你使 html 视图变宽，滚动条就会消失，当视图变窄时，滚动条就会出现。这就是我想要的。当我在 "narrow view" 时问题开始了：向下滚动到灰色框，现在展开 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-only 解决方案是，如果文本高度不变，则为 #see div 添加 calc(100% - HEIGHT_OF_TEXT) 的高度。但是我没试过这个。

Answer 3

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

将 hidden-xs 添加到您的 class 中以隐藏在超小视图中，或将 hidden-md 添加到中等视图中，依此类推（在下面的 Fiddle 中，如果您将宽度设置为结果 window 足够窄，你会看到这种情况发生，

当您转到较小的屏幕尺寸时，假设您想要显示两个 "title" 元素而不是四个，您可以将 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 列。或者你可以在较小的视图上做到这一点。这是一个Fiddle：https://jsfiddle.net/1dtnd59s/1/

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

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

Bootstrap - messed up @media and overflow issue

css

twitter-bootstrap

responsive-design

media-queries