Twitter Bootstrap 3导航栏崩溃错误
问题描述:
美好的一天家伙,我在崩溃导航栏中遇到了一些麻烦。当我点击折叠按钮时,它不会与浏览器的右侧对齐?Twitter Bootstrap 3导航栏崩溃错误
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a href="#" class="navbar-brand">My Site</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contacts</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Login<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Logout</a></li>
<li><a href="#">Logout</a></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
答
你需要用在.navbar-header
折叠按钮和品牌链接:
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">My Site</a>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contacts</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Login<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Logout</a></li>
<li><a href="#">Logout</a></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
答
必须使用navbar-header
,那么你有brand
和汉堡包图标上相同的级别和该行下面的菜单的全部内容。所以基本上你的代码看起来应该是这样的:
<div class="navbar-header">
<a href="#" class="navbar-brand">My Site</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
链接到活生生的例子:http://www.bootply.com/jowa705iHl
在这里你可以找到所有需要的文件:http://getbootstrap.com/components/#navbar
祝您好运:)的
+0
谢谢先生,我会试试这个! :) –
+0
学习Bootstrap的最简单方法是检查其网站并阅读可用文档。那么你的工作应该更容易:) – kwiat1990
谢谢先生,我会试试这个! :) –