1

こんにちは、ブートストラップ対応の CSS を使用して静的 Web ページをコーディングしていますが、ウィンドウのサイズを変更すると問題が発生します。

画面のサイズを変更すると消えるこのセクションがあります。

<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が消えて白い本体にコンテンツが表示されます。

なぜこれが起こっているのですか？よろしく

4

3 に答える 3

4

「clearfix」の組み込みのブートストラップ スタイルをスパンに追加するだけです。

<div class="span9 nav clearfix">

これで整理します。

于 2013-11-05T14:22:38.340 に答える
2

これは clearfix の問題です。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>
于 2013-11-05T14:19:56.640 に答える