Question

有点傻但有点问题。我将导航栏固定在顶部，里面有一些元素。问题是如果我以高百分比放大，导航栏中的元素重新组合，以便整个屏幕被导航栏覆盖。如果顶部栏不会保持固定状态，整个页面无用，那就没问题了。有没有办法在达到一些缩放级别后“解除”它？（你和我是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>

编辑：它似乎是容器流体的“特征”。

Answer 1

将元视口设置为文档头部的移动友好。

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

然后使用媒体查询，例如

@media all和（max-width：699px）{


.navbar {


显示：无;


}


}

我会采取一些措施，但你可能最好解锁导航并替换为移动友好的导航。

放大时，bootstrap固定导航栏覆盖整个屏幕

1 个答案: