1

Estou com um projeto que foi desenvolvido na versão Bootstrap v4.0.0-alpha.4. Nesse projeto tem uma paginação que segue os padrões do framework.

<nav aria-label="Navegação de página exemplo">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Anterior</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Próximo</a></li>
  </ul>
</nav>

O problema está no alinhamento, pois quando uso o dessa forma:

<nav aria-label="Navegação de página exemplo">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Anterior</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Próximo</a>
    </li>
  </ul>
</nav>

Não funciona... porém se eu retirar:

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

E colocar:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

Funciona, porém caga o layout todo :(

Já tentei usar o pull-right e o text-right, mas de nada adiantou.

Infelizmente é a manutenção de um projeto pronto e com isso não posso mudar a estrutura atual. Como posso alinhar a paginação para o lado direito sem impactar no layout?

3
  • 1
    Vc já tentou colocar na mão .pagination { justify-content: flex-end !important; } o Bootstrap tem uma hierarquia forte de classes e as vezes é necessário usar o important
    – hugocsl
    Commented 29/09/2018 às 23:16
  • Show de bola Hugo. Implementei no seu código display: flex; e funcionou. Obrigado!
    – user24136
    Commented 30/09/2018 às 2:18
  • 1
    Legal Fox.11 que bom que deu certo! Deixei a resposta mais completa caso vc queira aceita-la e não deixar a sua pergunta em aberto como Não Respondida sendo que já chegamos a uma solução. :)
    – hugocsl
    Commented 30/09/2018 às 13:12

1 Resposta 1

1

Aparentemente parece que vc está usando uma versão mais simples do Bootstrap que deve ter deixado de fora algumas classes dos Utilities como as classes de Flex. https://getbootstrap.com/docs/4.1/utilities/flex/

Ou então devido a alguma hierarquia de classes tem alguma outra propriedade de flex substituindo a sua.

De qualquer forma vc pode usar esse CSS abaixo que vai resolver seu problema:

.pagination {
    justify-content: flex-end !important;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<nav aria-label="Navegação de página exemplo">
    <ul class="pagination">
        <li class="page-item disabled">
        <a class="page-link" href="#" tabindex="-1">Anterior</a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item">
        <a class="page-link" href="#">Próximo</a>
        </li>
    </ul>
</nav>

2
  • Perfeito Hugo. Obrigado ;)
    – user24136
    Commented 1/10/2018 às 18:19
  • 1
    Valeu @Fox.11 tmj!
    – hugocsl
    Commented 1/10/2018 às 18:31

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