Bootstrap/Laravel 系统 - 尝试右对齐菜单项答案

【问题标题】：Bootstrap/Laravel system - trying to align a menu item rightBootstrap/Laravel 系统 - 尝试右对齐菜单项
【发布时间】：2020-06-24 22:51:59
【问题描述】：

我正在尝试右对齐菜单项，但它不起作用。菜单项（注销按钮）改为位于其他项下方。

我用于标题的标记是（注销按钮位于下方，而不是右侧的标记）：

<html>
    <head>
        <title>Sistema de Solicitação de Empréstimo</title>
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <meta name="viewport" content="width=devide-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <link href="/css/bootstrap.min.css" rel="stylesheet">
        <link href="/_css/estilo.css" rel="stylesheet">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

        <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>

        <style>
        .maincontent {
            padding-top: 80px;
        }

        .center-block {
            text-align: center;
            margin-top: 5px;
            margin-bottom: 5px;
        }
        </style>
    </head>
    <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <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 style="color: white" class="nav navbar-nav">
                    <li><a href="principal">Principal</a></li>
                    <li><a href="sobre">Sobre</a></li>
                    <li><a href="http:\\link">Login</a></li>
                    <li><a href="http:\\link">Registrar-se</a></li>
                </ul>-->
                <ul style="color: white" class="nav navbar-nav">
                    @if (Route::has('login'))

                        @auth
                            <li style="margin-right: 20px"><a href="{{ url('/home') }}">Perfil</a></li>
                            @if (!Auth::user()->isAdmin)
                                <li><a href="{{ url('/produtos') }}">Produtos</a></li>
                                <li style="margin-left: 20px"><a href="{{ url('/nova_solicitacao') }}">Nova Solicitação</a></li>
                                <li><a href="{{ url('/solicitacoes') }}">Solicitações</a></li>
                            @endif
                            @if (Auth::user()->isAdmin)
                                <li><a href="{{ url('/solicitacoes_aprovar_reprovar') }}">Analisar Solicitações</a></li>
                                <li><a href="{{ url('/novo_produto') }}">Novo Produto</a></li>
                                @if (Route::has('register'))
                                    <li><a href="{{ route('register') }}">Registrar</a></li>
                                    </ul>
                                @endif
                            @endif
                            <div class=".btn-nav topnav-right">
                            <ul style="color: white" class="nav navbar-nav topnav-right">

                                <li style="margin-left: 20px"><a href="{{ route('logout') }}"
                                        onclick="event.preventDefault();
                                                        document.getElementById('logout-form').submit();">
                                            {{ __('Logout') }}
                                        </a>
                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                            @csrf
                                    </form></li>
                            </ul>
                            </div>
                        @else
                        <ul>
                            <li><a href="principal">Principal</a></li>
                            <li><a href="sobre">Sobre</a></li>
                            <li style="margin-left: 20px"><a href="{{ route('login') }}">Login</a></li>
                            <li><a href="login_admin">Administrador</a></li>


                        @endauth
                    @endif
                </ul>
            </div>
        </div>
    </div>

    <main role="main" class="maincontent">
        @hasSection('body')
            @yield('body')
        @endif

    </body>
</html>

我正在尝试使用类 topnav-right 将项目右对齐，但是它不起作用。我尝试了在网上找到的其他解决方案，但它们也不起作用。

我怎样才能使它正确？

【问题讨论】：

有两个类可以对齐您的项目，pull-right 和 pull-left
它不工作。结果和我不使用任何类一样。
我尝试使用 float-right，但也出现了同样的问题 - 按钮位于其他按钮下方，而不是向右移动。

标签： html css laravel bootstrap-4

【解决方案1】：

用此代码替换您的注销 div，看看它是否有效

<div class=".btn-nav topnav-right d-flex justify-content-end">
    <ul style="color: white" class="nav navbar-nav topnav-right">

        <li style="margin-left: 20px"><a href="{{ route('logout') }}"
                onclick="event.preventDefault();
                                document.getElementById('logout-form').submit();">
                    {{ __('Logout') }}
                </a>
            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                    @csrf
            </form></li>
    </ul>
</div

【讨论】：