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?
.pagination { justify-content: flex-end !important; }
o Bootstrap tem uma hierarquia forte de classes e as vezes é necessário usar oimportant
display: flex;
e funcionou. Obrigado!