这是我对导航栏的代码,它在桌面上运行良好。
<nav class="navbar navbar-inverse navbar-fixed-top" style="border-bottom-width: 2px;">
<div class="container-fluid">
<div clss="navbar-header">
<a href="index.php" class="navbar-brand">Logo</a>
<button type="button" class="navbar-toggle" style="border-color: #4c4c4c;" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="mainNavBar">
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</div>
</nav>
现在我可以在导航栏崩溃之前添加一个clearfix div,这在移动设备上很有用,但在桌面上却不行。以下是移动版和桌面版 clearfix div:
有没有办法只在移动设备上使用clearfix或者有更好的方法吗?
答案 0 :(得分:3)
答案 1 :(得分:0)
您编码了错误的导航结构,这就是出现此问题的原因。
请删除此mainNavBar div中的div标记。
请参阅此示例:https://getbootstrap.com/examples/navbar-fixed-top/
在代码中进行如下更改:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNavBar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="mainNavBar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
遵循正确的bootstrap结构不会出现问题。
希望这会对你有所帮助。如果有任何问题,请告诉我?