3

Estou com um problemão tentando centralizar uma nav em um grid.

O fiddle está aqui, e eu queria que, quando o espaço acabasse e as "células" empilhassem, a nav ficasse centralizada que nem o parágrafo do wordpress.

Não achei nenhuma referência a não ser relativo a navbar (não vou usar por questões funcionais) e aparentemente focado pra versões antigas.

Enfim, qual solução eu poderia tomar?

1
  • Sim. Estou desenvolvendo o layout em cima dele
    – Vico
    31/08/2015 às 1:09

1 Resposta 1

3

Dúvida respondida na postagem em inglês.

a classe .nav-pills tem float:left por padrão. Então é só colocar pra none e depois mostrar todos em uma linha com display: inline-block.

FIDDLE ATUALIZADO

#page_footer {
    background-color: #f5f5f5;
    width: 100%;
}
#page_footer .container {
    padding: 20px;
}
#page_footer_links {
    margin: 0 auto;
    text-align: center;
}
#page_footer_wordpress {
    margin: 0px;
    height: 40px;
    line-height: 40px;
}
.nav-pills > li {
    float: none !important;
    display: inline-block !important;
}

--

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<footer id="page_footer">
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <ul id="page_footer_links" class="nav nav-pills nav-center">
          <li role="presentation"><a href="#">Home</a>
          </li>
          <li role="presentation"><a href="#">Profile</a>
          </li>
          <li role="presentation"><a href="#">Messages</a>
          </li>
        </ul>
      </div>
      <div class="col-md-4">
        <p id="page_footer_wordpress" class="text-center">Orgulhosamente movido com <a href="http://wordpress.org/" title="A Semantic Personal Publishing Platform" rel="generator" target="_blank">WordPress</a>!!!</p>
      </div>
    </div>
  </div>

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 .