Css 引导3导航折叠菜单-定位始终在右侧

我有这个引导头菜单，我想要登录锚，一直在右边，在UL导航之后，和折叠按钮

我已经试过了，往右拉，但没用

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

切换导航







子链接
子链接2

因为当前JSFIDLE有问题，我将把修改后的代码粘贴到这里：

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

更新：当我们有不同的分辨率时，我没有检查它的行为。这样如何：我们创建2个登录锚并通过媒体查询控制它们的外观？使用此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>

---

谢谢你，卡米尔。它解决了我一半的问题，如果菜单崩溃，它会显示在右边，但当分辨率较大时，它会停留在徽标附近（结束div是一个粘贴问题）。

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

@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;
}