因此,我已经开始构建我的第一个网站,并且正在尝试Bootstrap 3框架。
我选择的导航栏已设置为响应屏幕尺寸,因此最终它会折叠成一个小按钮,可在平板电脑和移动设备上使用。
不过,我不太喜欢折叠的导航栏项目的默认位置;当我希望它们从徽标下方开始时,它们会立即显示在徽标旁边。即在此屏幕截图的蓝色虚线区域中:
屏幕宽度越窄,问题就越多:
导航栏以767px的宽度折叠;我在引导CSS上打了个戳,发现有很多@media
查询,但不确定是哪一个查询对我有帮助,也不知道当折叠时导航栏项目如何降到徽标下方。
到目前为止,这是我的html导航栏(很显然,从引导文件中提取了css / js)。
<header>
<!-- navigation -->
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" id="MyLogo">LOGO HERE</a>
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">PAGE 1</a></li>
<li><a href="#">PAGE 2</a></li>
<li><a href="#">PAGE 3</a></li>
<li><a href="#">PAGE 4</a></li>
<li><a href="#">PAGE 5</a></li>
</ul>
</div>
</div>
</div>
</header>
在jfiddle上使用您的代码时,我遇到了同样的问题。您的某些代码已关闭。默认情况下,Bootstrap应该可以执行您想要的操作-折叠后的图像应位于徽标下方。
您刚刚离开了按钮和品牌周围的导航栏标题div。
<header>
<!-- navigation -->
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header"><!-- navbar-header should go here -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" id="MyLogo">LOGO HERE</a>
</div><!--header should end here -->
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">PAGE 1</a></li>
<li><a href="#">PAGE 2</a></li>
<li><a href="#">PAGE 3</a></li>
<li><a href="#">PAGE 4</a></li>
<li><a href="#">PAGE 5</a></li>
</ul>
</div>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句