html - Twitter Bootstrap 3 导航栏崩溃错误

Question

大家好，我在折叠导航栏上遇到了一点麻烦。当我单击折叠按钮时它没有与浏览器的右侧对齐？

<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>

Sample output

Answer 1

您必须使用 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

祝你好运:)