bootstrap固定导航栏在放大时覆盖整个屏幕
问题描述:
有点傻,但稍微涉及到问题。我有navbar固定到顶部与内部的一些元素。问题是,如果我以高百分比进行放大,则导航栏中的元素会重新组合,以便导航栏覆盖整个屏幕。如果顶栏不能保持固定,那么整个页面就没用了。在达到某个缩放级别后,有没有办法“解开”它? (你和我是css noob)。这里是导航栏的标记:bootstrap固定导航栏在放大时覆盖整个屏幕
<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>
编辑:它似乎是“容器流体的一个功能”。
答
将元视口设置为在文档头部移动友好。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
然后使用媒体查询例如
@media所有和(最大宽度:699px){
.navbar {
显示:无;
}
}
我会采取一些与瞎搞,但你可能是最好的解除固定导航和与移动友好的一个替代英寸