[英]navbar-toggle disappears at 768px
由於某些原因,我的導航欄切換開關消失在768px。 我不確定是什么問題,但我認為這與我的CSS和媒體查詢有關。 我將以768px發布我的導航條形碼和CSS(我的媒體查詢就像@media屏幕,(最大寬度:768px),所以它應該包括768,對嗎?),但是我還將包括一個jsfiddle鏈接,我在該頁面上的所有代碼,查看問題是否出在其他地方。 這是我的導航條形碼
<nav class ="navbar navbar-transparent navbar-inverse navbar-fixed-top" id="navBarStyle" role="navigation">
<div class="container">
<div class="navbar-header">
<button data-toggle="collapse-side" data-target=".side-collapse" data-target-2=".side-collapse-container" type="button" class="navbar-toggle navbar-right">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index2.html"><i>Marvin</i></a>
</div>
<div class="side-collapse in">
<nav role="navigation" class="navbar-collapse ">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="html/about.html">About</a>
</li>
<li>
<a href="html/projects.html">Projects</a>
</li>
<li>
<a href="html/contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
</div>
</nav>
的CSS
@media screen and (max-width: 768px)
{
.side-collapse-container
{
width:100%;
position:relative;
right:0;
transition:left .4s;
}
.side-collapse-container.out
{
right:200px;
}
.side-collapse
{
top:50px;
bottom:0;
right:0;
width:200px;
position:fixed;
overflow:hidden;
transition:width .4s;
}
.side-collapse.in
{
width:0;
}
#navBarStyle
{
margin-top:.5%;
}
}
不能完全確定問題是什么,我讀到它可能是引導程序本身的問題。 這是我的jsfid https://jsfiddle.net/marvstah/tLzorkdg/1/
重要提示,它適用於除768以外的所有尺寸,但不適用於768
將您的media-query
max-width更改為767px
。
由於您正在使用bootstrap
。 Botstrap.css有一些媒體查詢767px
。 它會覆蓋您的。
這是工作中的演示
@media screen and (max-width: 767px) { .side-collapse-container { width:100%; position:relative; right:0; transition:left .4s; } .side-collapse-container.out { right:200px; } .side-collapse { top:50px; bottom:0; right:0; width:200px; position:fixed; overflow:hidden; transition:width .4s; } .side-collapse.in { width:0; } #navBarStyle { margin-top:.5%; } }
只是好奇,它為您解決過嗎? 我遇到同樣的問題,但分辨率為767px。 我的視口在767像素和768像素上可以正常工作,但是在767像素上卻無法正常工作。 但據我觀察,最大寬度:767像素不包括767像素。 但在最小寬度/最大寬度上:768px都包括768px! 我正在拉頭發...
我們不需要使用所有樣式。 無論如何,我們都有引導程序,因此我們可以使用基本的Bootstrap Nav rit嗎?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Marvin</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.