引导响应 Div 在调整大小时消失

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/

如您所见，当您使用小屏幕时，页面顶部的蓝色div消失，内容显示在白色正文中。

知道为什么会这样吗？Regards

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。 哎呀。