将引导按钮与导航栏的右侧对齐

Question

所以，我是所有这一切的新手。 这是我有史以来第一个使用HTML / CSS的实际项目，因此请记住这一点。 建设性的批评总是受欢迎的，因为它只会帮助我变得更好。

既然这样，我的问题就解决了：

因此，我正在使用Bootstrap，因为它易于使用，到目前为止，根据我的经验，它在某种程度上是用户友好的。 但是，我无法承受一切，所以我想出了如何将下拉按钮移到导航栏的右侧。

这是我的导航栏的代码（再次，很抱歉，如果它是垃圾箱。这是新的）：

<div id="navbar" class="navbar navbar-default navbar-custom navbar-fixed-top">
    <a class="navbar-brand" href="">AVC Gaming</a>
    <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" role="button" aria-expanded="false">Forums <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Ban Appeal</a></li>
                    <li><a href="#">Registration</a></li>
                </ul>
            </li>

            <li class="button"><a href="">Donate</a></li>

            <li class="dropdown">
                <a href="#" role="button" aria-expanded="false">UK 111 <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Forums</a></li>
                    <li><a href="#">Arma 2</a></li>
                    <li><a href="#">Arma 3</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

如果您愿意，这里有一个实时版本： http : //www.avc-gaming.us/avc

我曾尝试在UK 111下拉菜单<ul>添加“右拉”功能，但这没有任何作用。 当我在Donate按钮上添加“ pull-right”时，它所做的就是交换UK 111下拉菜单中的位置。

有任何想法吗？

Answer 1

如果要将所有这些移动到页面的右侧，请将Float:right放在<ul class="nav navbar-nav">如下所示：

<div id="navbar" class="navbar navbar-default navbar-custom navbar-fixed-top">
    <a class="navbar-brand" href="">AVC Gaming</a>
    <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav" style="float:right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" role="button" aria-expanded="false">Forums <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Ban Appeal</a></li>
                    <li><a href="#">Registration</a></li>
                </ul>
            </li>

            <li class="button"><a href="">Donate</a></li>

            <li class="dropdown">
                <a href="#" role="button" aria-expanded="false">UK 111 <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Forums</a></li>
                    <li><a href="#">Arma 2</a></li>
                    <li><a href="#">Arma 3</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

要么

如果只想移动最后一个，则在<ul class="nav navbar-nav">行上设置Width:96% ，然后在最后一个下拉列表<li class="dropdown">上float:Right

<div id="navbar" class="navbar navbar-default navbar-custom navbar-fixed-top">
    <a class="navbar-brand" href="">AVC Gaming</a>
    <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav" style="Width:96%">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" role="button" aria-expanded="false">Forums <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Ban Appeal</a></li>
                    <li><a href="#">Registration</a></li>
                </ul>
            </li>

            <li class="button"><a href="">Donate</a></li>

            <li class="dropdown" style="Float:right">
                <a href="#" role="button" aria-expanded="false">UK 111 <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Forums</a></li>
                    <li><a href="#">Arma 2</a></li>
                    <li><a href="#">Arma 3</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

Answer 2

向右拉动的方式应该像它应该的那样。 但是，由于ul.nav navbar-nav的宽度只是占用了其内容的空间，因此无法正常工作。 如果您将ul.nav navbar-nav的宽度设置为例如90％，您将看到它正确对齐。

Answer 3

您必须移动UK 111的<li>来分隔<ul>并向其中添加“ pull-right”类以及用于样式化列表的其他类。

 <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="http://forums.avc-gaming.us" class="dropdown-toggle" role="button" aria-expanded="false">Forums <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Ban Appeal</a></li> <li><a href="#">Registration</a></li> </ul> </li> <li class="button"><a href="">Donate</a></li> </ul> <ul class="nav navbar-nav pull-right"> <li class="dropdown"> <a href="http://www.uk111.uk" role="button" aria-expanded="false">UK 111 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="http://www.uk111.uk/forum">Forums</a></li> <li><a href="http://www.uk111.uk/a2servers">Arma 2</a></li> <li><a href="http://www.uk111.uk/a3servers">Arma 3</a></li> </ul> </li> </ul> </div> 

Answer 4

您可以添加bootstrap自己的类pull-right 。 我这里有一个例子！

<div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid pull-right">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#Home">Home</a></li>
                </ul>
            </div>
        </div>

Answer 5

Bootstrap 3提供了此功能。 请参考文档以获取完整示例 ，尤其是右对齐链接： 组件对齐

关于向右和导航栏

使用.navbar-left或.navbar-right实用工具类对齐导航链接，表单，按钮或文本。 这两个类都将沿指定方向添加CSS浮点数。 例如，要对齐导航链接，请将其放在单独的<ul> ，并应用相应的实用程序类。

这些类是.pull-left和.pull-right的混合版本，但它们的范围仅限于媒体查询，以便更轻松地处理跨设备大小的导航栏组件。

组件对齐

右对齐多个组件Navbars当前具有多个.navbar-right类的限制。 为了适当地间隔内容，我们在最后一个.navbar-right元素上使用负边距。 当有多个元素使用该类时，这些页边距将无法正常工作。

请参见FullPage上完整的示例示例。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <nav id="navbar" class="navbar navbar-default navbar-custom navbar-fixed-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"> <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="">AVC Gaming</a> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Forums <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Ban Appeal</a> </li> <li><a href="#">Registration</a> </li> </ul> </li> <li class="button"><a href="#">Donate</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">UK 111 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Forums</a> </li> <li><a href="#">Arma 2</a> </li> <li><a href="#">Arma 3</a> </li> </ul> </li> </ul> </div> </div> </nav>