-1

Estou tentando criar um layout com o bootstrap 4 e para isso peguei um exemplo de navbar no site deles. O problema é que eu gostaria de descer o botão mobile em uma nova linha e centralizar, porém, não estou conseguindo, já utilizei as classes .text-center, .mx-auto já tentei dar um display: block; mas simplesmente não vai.

Atualmente está desse jeito:

inserir a descrição da imagem aqui

Quero que fique assim:

inserir a descrição da imagem aqui

Código:

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse d-flex align-items-center">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navSuperior" aria-controls="navSuperior" aria-expanded="false">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#"><div id="navLogo">LOGO</div></a>
            <div class="collapse navbar-collapse" id="navSuperior">
                <div id="navSearch">
                    <form class="form-inline d-flex p-2">
                        <input class="form-control" type="text" placeholder="Search">
                        <button class="btn btn-outline-success" type="submit">Search</button>
                    </form>
                </div>
                <div id="navMenu">
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#">Disabled</a>
                        </li>
                    </ul>  
                </div>
            </div>
        </nav>
1
  • Jovem, o snippet que você disponibilizou não está nem parecido com a imagem. Você testou seu próprio exemplo ?
    – DevBusy
    28/08/2017 às 1:59

1 Resposta 1

1

Testando no exemplo mencionado do site Bootstrap, adicione os styles:

No <a> da LOGO:

style="display: block; width: 100%; text-align: center; margin: 0;"

No <button>:

style="margin: 0 auto;"

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<nav class="navbar navbar-dark bg-dark">
      <a style="display: block; width: 100%; text-align: center; margin: 0;" class="navbar-brand" href="#">LOGO</a>
      <button style="margin: 0 auto;" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarsExample01">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
        <form class="form-inline my-2 my-md-0">
          <input class="form-control" type="text" placeholder="Search" aria-label="Search">
        </form>
      </div>
    </nav>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .