文章/答案/技术大牛

发布

社区首页 >问答首页 >Bootstrap/Laravel系统-尝试将菜单项右对齐

问Bootstrap/Laravel系统-尝试将菜单项右对齐
EN

Stack Overflow用户

提问于 2020-03-13 04:51:07

回答 1查看 376关注 0票数 0

我正在尝试将菜单项正确对齐，但它不起作用。菜单项(注销按钮)位于其他项的下方。

我为标题使用的标记是(注销按钮位于下方，而不是右侧的标记)：

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

我怎么才能把它改正呢？

html

css

laravel

bootstrap-4

回答 1

Stack Overflow用户

发布于 2020-03-13 14:08:19

用下面的代码替换您的注销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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60661708

复制

相似问题

问Bootstrap/Laravel系统-尝试将菜单项右对齐
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap/Laravel系统-尝试将菜单项右对齐EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap/Laravel系统-尝试将菜单项右对齐
EN