Question

您好我正在编写一个带有引导响应式CSS的静态网页，当我调整窗口大小时我遇到了问题。

当我调整屏幕大小时，我的这一部分会消失：

<div class="span9 nav">
                <h1><span class="logo"><em>Academia</em> <b>GEO</b></span></h1>
                <ul>
                    <li><a href="#details"><img src="img/icons/mail.png"></a></li>
                    <li><a href="#details"><img src="img/icons/phone.png"></a></li>
                    <li><a href="https://www.facebook.com/pages/Academia-GEO/570581836324054" target="_blank"><img src="img/icons/fb.png"></a></li>
                </ul>
            </div>

我不知道为什么div没有像预期的那样正确调整大小。

这是页面：

http://209.141.57.95/

正如你所看到的，当你使用一个小的screent时，页面顶部的蓝色div消失了，内容显示在白色的身体里。

知道为什么会这样吗？此致

Answer 1

只需在内容中添加内置的“clearfix”引导样式：

<div class="span9 nav clearfix">

这将解决它。

Answer 2

这是一个明确的问题;因为div中的所有元素都是浮动的，所以div会向下折叠，因此它没有高度。

这可以很容易地修复：

<div class="span9 nav">
                <h1><span class="logo"><em>Academia</em> <b>GEO</b></span></h1>
                <ul>
                    <li><a href="#details"><img src="img/icons/mail.png"></a></li>
                    <li><a href="#details"><img src="img/icons/phone.png"></a></li>
                    <li><a href="https://www.facebook.com/pages/Academia-GEO/570581836324054" target="_blank"><img src="img/icons/fb.png"></a></li>
                </ul>
                <div style="clear: both;"></div>
</div>

Answer 3

<div style="clear: both;"></div>对我有用，但真正的问题是我应该使用col-xl而不是col-sm或col-md。 Durp。

Bootstrap响应Div在调整大小时消失

3 个答案: