css - Bootstrap 3 导航折叠菜单 - anchor 总是在右边

Question

我有这个 Bootstrap 主菜单，我想要登录 anchor ，一直在右边，在 UL 导航和折叠按钮之后。

我已经试过 .pull-right 了，但是没用。

    <header id="main-header">
    <nav class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                <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="#">
                <img alt="Logo" src=""></a>

        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul id="nav" class="nav navbar-nav nav-pills navbar-right">
                <li><a href="~/Home">home</a></li>
                <li class="dropdown"><a href="#">link2</a></li>
                <li class=""><a href="#">link3</a></li>
                <li class=""><a href="#">link4</a></li>
                <li class=""><a href="#" class="dropdown-toggle"  data-toggle="dropdown">link4</a>
                    <ul class="dropdown-menu">
                    <li>sublink</li>
                    <li>sublink2</li>
                    </ul>
                </li>
            </ul>

                <a href="#" class="btn btn-primary">
                    Login</a></div>

    </nav>
    </header>

Answer 1

因为目前jsfiddle有问题，我将修改后的代码贴在这里:

<header id="main-header">
    <nav class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <div class="pull-right">
                <a id="rightAnchor" href="#" class="btn btn-primary">
                    Login</a>
                </div>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <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="#">
                <img alt="Logo" src=""/></a>

            </div>
            <div class="collapse navbar-collapse" id="navbar-collapse">
                <ul id="nav" class="nav navbar-nav nav-pills navbar-right">
                    <li><a href="~/Home">home</a>
                    </li>
                    <li class="dropdown"><a href="#">link2</a>
                    </li>
                    <li class=""><a href="#">link3</a>
                    </li>
                    <li class=""><a href="#">link4</a>
                    </li>
                    <li class=""><a href="#" class="dropdown-toggle" data-toggle="dropdown">link4</a>

                        <ul class="dropdown-menu">
                            <li>sublink</li>
                            <li>sublink2</li>
                        </ul>
                    </li>
                </ul> 
            </div>
        </div>
    </nav>
</header>

首先，您缺少一个结束 div，就在 nav 结束标记之前。接下来，我在 navbar-header 中的 button 之前添加了带有 pull-right 类的 div。最后，添加一些边距，使登录 anchor 看起来与菜单相同:

#rightAnchor {
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
}

更新:当我们有不同的分辨率时，我没有检查它的行为。这样怎么样:我们创建 2 个登录 anchor 并使用媒体查询控制它们的外观？使用此 HTML 将如下所示:

<header id="main-header">
    <nav class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <div id="rightAnchorMobile" class="pull-right">
                <a href="#" class="btn btn-primary">
                    Login</a>
                </div>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <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="#">
                <img alt="Logo" src=""/></a>

            </div>
            <div class="collapse navbar-collapse" id="navbar-collapse">
                <div id="rightAnchor" class="pull-right">
                <a href="#" class="btn btn-primary">
                    Login</a>
                </div>
                <ul id="nav" class="nav navbar-nav nav-pills navbar-right">
                    <li><a href="~/Home">home</a>
                    </li>
                    <li class="dropdown"><a href="#">link2</a>
                    </li>
                    <li class=""><a href="#">link3</a>
                    </li>
                    <li class=""><a href="#">link4</a>
                    </li>
                    <li class=""><a href="#" class="dropdown-toggle" data-toggle="dropdown">link4</a>

                        <ul class="dropdown-menu">
                            <li>sublink</li>
                            <li>sublink2</li>
                        </ul>
                    </li>
                </ul> 
            </div>   
        </div>
    </nav>
</header>

和 CSS:

@media screen and (min-width:768px) {   
    #rightAnchorMobile {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    #rightAnchor {
        display: none;
    }    
}

#rightAnchorMobile > a {
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
}

#rightAnchor > a {
    margin-top: 8px;
    margin-left: 15px;
    margin-bottom: 8px;
}