3

Estou usando o Bootstrap 4, conforme documentação (https://getbootstrap.com/docs/4.0/utilities/flex/).

Utilizando a classe justify-content-center eu tenho o seguinte resultado:

Aplicação da classe Bootstrap, que não me atende

Minha div está com as classes: d-flex flex-wrap justify-content-center

Eu gostaria que estes itens menores ficassem centralizados na página, porém, que sua última linha ficasse alinhada a esquerda, desta maneira:

Como eu gostaria que fosse

É possível? Aceito sugestões de outra maneira para chegar no mesmo resultado, mesmo que não utilize o Flexbox. Preciso que a solução seja "responsiva", podendo servir para qualquer tamanho e quantidade de elementos.

2
  • Não entendi bem sua pergunta.. Você deseja obter o resultado como na segunda imagem, certo? Porém quando abri o seu link do codepen, o resultado foi igual ao da segunda imagem, veja esse print 7/02/2018 às 11:18
  • Olá @celsomtrindade, acabei atualizando o CodePen após a primeira interação com o usuário dvd. Retornei agora para o código original. De qualquer modo, ele resolveu meu problema usando JavaScript. Obrigado.
    – natodp
    7/02/2018 às 12:22

1 Resposta 1

1

Creio que conseguirá isto agrupando as divs dentro de uma div-mãe e usando os eventos resize e load (para ajustar no carregamento da página) do jQuery para setar uma largura nesta div do tamanho exato até que caibam o máximo de divs .item dentro dela.

Não precisa mexer em nada no seu código original, apenas criar uma div com um id qualquer (coloquei id="items") e agrupar, veja:

$(window).on("load resize", function(){
   var content = $(".content.d-flex").width();
   var items = $(".item").outerWidth(true);

   var items_width = Math.floor(content / items);
   
   $("#items").css({
      'max-width':items_width*items+'px'
   });
});
.content {
  max-width: 500px;
  margin: 0 auto;
  border: 1px solid black;
  margin-bottom: 50px;
}

.item {
  width: 100px;
  height: 100px;
  margin: 2px;
  background: gray;
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="content d-flex flex-wrap justify-content-center">
   <div id="items">
      <div class='item'></div>
      <div class='item'></div>
      <div class='item'></div>
      <div class='item'></div>
      <div class='item'></div>
      <div class='item'></div>
      <div class='item'></div>
   </div>
</div>

8
  • Olá dvd, esqueci de mencionar que estou pensando na responsividade, sendo as três colunas somente um exemplo. Com seu código, ele já não funciona diminuindo a tela, resultando em: [![Coluna com dois itens][1]][1] [1]: i68.tinypic.com/o0huc.jpg
    – natodp
    6/02/2018 às 22:30
  • Não consegui abrir a imagem.
    – Sam
    6/02/2018 às 22:34
  • Sou novo no fórum e não estou sabendo anexá-la ao meu comentário. Segue URL: uploaddeimagens.com.br/imagens/responsivo-jpg Para ver esse resultado, basta redimensionar a tela com o seu código.
    – natodp
    6/02/2018 às 22:37
  • Atualizei o Codepen: codepen.io/natodp/pen/EQgogR basta redimensionar a janela de visualização.
    – natodp
    6/02/2018 às 22:41
  • Blz, vou dar uma olhada aqui e te retorno
    – Sam
    6/02/2018 às 22:46

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 .