Question

我有这个Bootstrap头菜单，我想要在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。接下来，我在pull-right button之前的navbar-header课程中添加了div。最后，添加一些边距，以便登录锚看起来与菜单相同：

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

更新：当我们有不同的分辨率时，我没有检查它的行为。怎么样：我们创建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>

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

Bootstrap 3导航折叠菜单 - 始终在右侧锚点

1 个答案: