將引導按鈕與導航欄的右側對齊

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>