0

少しばかげていますが、少し気になる問題です。内部にいくつかの要素を含むナビゲーションバーを上部に固定しています。問題は、高いパーセンテージでズームインすると、ナビゲーションバーの要素が再グループ化され、画面全体がナビゲーションバーで覆われることです。トップバーが固定されたままではなく、ページ全体が役に立たない場合は問題ありません。ズームレベルに達した後、それを「修正」する方法はありますか? （あなたと私はcss noobです）。ナビゲーションバーのマークアップは次のとおりです。

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid">
            <a class="brand" href="{% url home %}">Pavel Nováček</a>
            <ul class="nav">
                {% load tag_library %}
                {% set_current_urlname %}
                <li><a href="{% url home %}" class=""><img src="/static/web/img/cz.png"></a></li>
                <li><a href="{% url home %}" class="" style="padding-left: 0px"><img src="/static/web/img/gb.png"></a></li>

                <li class="{% if current_urlname == 'home' %}active{% endif %}">
                <a href="{% url home %}"><strong>Home</strong></a>
                </li>
                <li class="{% if current_urlname == 'about-me' %}active{% endif %}">
                <a href="{% url about-me %}"><strong>About me</strong></a>
                </li>
                <li class="{% if current_urlname == 'books' %}active{% endif %}">
                <a href="{% url books %}"><strong>Books</strong></a>
                </li>
                <li class="{% if current_urlname == 'presentations' %}active{% endif %}">
                <a href="{% url presentations %}"><strong>Presentations</strong></a>
                </li>
                <li class="{% if current_urlname == 'links' %}active{% endif %}">
                <a href="{% url links %}"><strong>Links</strong></a>
                </li>
                <li class="{% if current_urlname == 'contact' %}active{% endif %}">
                <a href="{% url contact %}"><strong>Contact</strong></a>
                </li>
            </ul>

        </div>
    </div>
</div>

EDIT：コンテナ流体の「機能」のようです。

4

1 に答える 1

0

ドキュメントのヘッドでメタ ビューポートをモバイル フレンドリーに設定します。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

次に、メディアクエリを使用します。

@media all and (max-width: 699px) {

.navbar {

表示:なし;

}

}

いじり回しますが、おそらく最善の方法は、ナビゲーションを修正せず、モバイル フレンドリーなものに置き換えることです。

于 2013-02-28T13:56:31.763 に答える