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

问题描述

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

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

<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 将项目右对齐，但是它不起作用。我尝试了在网上找到的其他解决方案，但它们也不起作用。

我怎样才能使它正确？

标签： htmlcsslaravelbootstrap-4

<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

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

问题描述

解决方案

推荐阅读