How do I centralize the links of a navbar viewed in mobiles with bootstrap 3?

Navigation
1

Next, I'm using bootstrap version 3.7.2 to do a navbar and I configured it so that when "collapsed", that is, when viewed on mobile devices, it has the toggle button on the right and logo is located on the left due to css configurations. So far so good, but when clicked, the links appear with an alignment to the left. What configuration can I use to align these links to the center of this bootstrap-only dropdown in this view?

Follow the navbar code: 

    <nav class="navbar navbar-fixed-top navbar-default navbar-fundo"> <!-- Barra de Navegação -->

        <div class="container-fluid"> <!-- Agrupar logo toggle e links -->

            <div class="navbar-header">

                <!-- Botão Alternar -->
                <button type="button" class="navbar-toggle collapsed navbar-right" data-toggle="collapse" data-target="#barra-navegacao" aria-expanded="false">
                    <span class="sr-only">Alternar navegação</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <!-- Logo Carta -->
                <a class="navbar-brand" href="index.html">
                    <span class="img-logo">Logo</span>
                </a>
            </div> <!--/navbar-header-->

            <!-- navbar -->
            <div class="collapse navbar-collapse" id="barra-navegacao">
                <ul class="nav navbar-nav">
                    <li class="active font_nav">
                        <a href="index.html">
                            Home
                        </a>
                    </li>
                    <li class="font_nav">
                        <a href="relatos.html">
                            Relatos
                        </a>
                    </li>
                    <li class="font_nav">
                        <a href="escreva.html">
                            Escreva seu relato
                        </a>
                    </li>
                    <li class="font_nav">
                        <a href="info.html">
                            Informações
                        </a>
                    </li>
                    <li class="font_nav">
                        <a href="privacidade.html">
                            Privacidade
                        </a>
                    </li>                   
                </ul>

            </div> <!--/itens da barra-navegacao-->


        </div> <!--/nav container-fluid-->

    </nav>

Another less important thing: do you have the link that is currently active appear in the center of the navbar as if it were the title of the page?

    
asked by anonymous 25.09.2018 / 18:58

1 answer

2

Add class text-center to ul navbar-nav .

See: 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<nav class="navbar navbar-fixed-top navbar-default navbar-fundo"> <!-- Barra de Navegação -->

        <div class="container-fluid"> <!-- Agrupar logo toggle e links -->

            <div class="navbar-header">

                <!-- Botão Alternar -->
                <button type="button" class="navbar-toggle collapsed navbar-right" data-toggle="collapse" data-target="#barra-navegacao" aria-expanded="false">
                    <span class="sr-only">Alternar navegação</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <!-- Logo Carta -->
                <a class="navbar-brand" href="index.html">
                    <span class="img-logo">Logo</span>
                </a>
            </div> <!--/navbar-header-->

            <!-- navbar -->
            <div class="collapse navbar-collapse" id="barra-navegacao">
                <ul class="nav navbar-nav text-center">
                    <li class="active font_nav">
                        <a href="index.html">
                            Home
                        </a>
                    </li>
                    <li class="font_nav">
                        <a href="relatos.html">
                            Relatos
                        </a>
                    </li>
                    <li class="font_nav">
                        <a href="escreva.html">
                            Escreva seu relato
                        </a>
                    </li>
                    <li class="font_nav">
                        <a href="info.html">
                            Informações
                        </a>
                    </li>
                    <li class="font_nav">
                        <a href="privacidade.html">
                            Privacidade
                        </a>
                    </li>                   
                </ul>

            </div> <!--/itens da barra-navegacao-->


        </div> <!--/nav container-fluid-->

    </nav>
    
25.09.2018 / 19:30
function that returns mapping letter of the drivers in delphi How to fire multiple errors in a single data check using C #