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

祝你好运：）

Answer 2

您需要在.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>

Twitter Bootstrap 3 Navbar崩溃错误

2 个答案: