Jump to content
Wagner M.M

Quebra de linha com altura de imagens diferentes, Bootstrap

Recommended Posts

Estou com um problema em minha Grid com quebra de linha, as imagens vem de um banco de dados e são de alturas diferentes, umas horizontais e outras verticais.

Estou usando o bootstrap.

Tenho esse código

Citar

<div class="row">

<div class="col-sm-4 borda_cat">

 

<a href="produtos/<?php echo $row_categoria2["url"] ?>/<?php echo $row_subcategoria2["url"] ?>/<?php echo $row_produtos["url"] ?>" class="hvr-bubble-top"><img src="uploads/<?php echo $row_fotos_produtos["nome"]?>" class="img-responsive"></a>

 

</div>

</div>

no site as imagens ficam assim

https://uploaddeimagens.com.br/imagens/img-jpg--161

 

Como faria para alinhar as colunas sendo que as alturas são diferentes?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By proflupin
      criei uma página que busca alguns dados no BD e retornar em forma de collapse. Como existe um WHILE executando o collapse, ele sempre o executa com o mesmo ID, ou seja, se eu tiver 20 collapse, todos vão ser abertos ao clicar no primeiro.
      A dúvida é, como eu posso criar um novo ID para o collapse a cada loop do While?
      Código:
       
      <?php while($result_inners = mysqli_fetch_object($result_inner)){ ?> <div class="card-footer "> <a class="text-muted" data-toggle="collapse" href="#collapse1" role="button" aria-expanded="false" aria-controls="collapseExample"> <i class="fas fa-comment-alt"></i> <?php if(!empty($result_inners->nome_completo)) echo $result_inners->nome_completo . " respondeu..."; else echo "Aguardando resposta do técnico." ?> </a> <div class="collapse " id="collapse1"> <div class="bg-white mt-2 p-2"> <?php echo nl2br($result_inners->mensagem) ?> </div> <span style="color: #6c757d; float: right;"><?php echo date('d/m/Y H:i', strtotime($result_inners->data_hora)) ?></span> </div> </div> <?php } ?>  
    • By Lucas Trindade
      Boa noite galera!
       
      Estou desenvolvendo um site em Bootstrap e surgiu uma dúvida afinal nunca desenvolvi um layout desta forma.
       
      Na foto anexada os 3 cards estão deslocados para baixo do container e isto faz com que a seção seguinte dos cards fique em cima deles por conta deste deslocamento.
       
      Não sei se fui bem claro mas, como eu arrumaria isso? 
       
      Preciso desenvolver este site para enviar para uma empresa. Alguém poderia me ajudar? Se for necessário envio o arquivo com o site inteiro.Obrigado
    • By xdxddxd
      Galera neste site aqui tem umas setas em um accordion, e eu gostaria de saber como faço para elas se movimentarem a cada clique.
      se alguem conseguir algum link com tutorial ou me passar algum script eu sou imensamente agradecido.
      estou usando o accordion padrão do bootstrap 4+
      Clique neste: Exemplo
    • By manolegal
      Bom dia
      Após selecionar a Pessoa em um formulário, tenho um botão para editar os dados desta pessoa em um Modal:
      <span class="input-group-addon"><a href="#" id="btn_editar" class="glyphicon glyphicon-pencil" data-toggle="modal" data-target="#modal_edit_pessoa_red"></a></span> Busco os dados no BD e preencho os inputs do modal:
      <script type="text/javascript"> $(document).ready(function () { $('#btn_editar').click(function () { var id = $("#id_cont_hid").val(); var id_cont= JSON.stringify(id); $.ajax({ type: "POST", url: "minha_busca_bd?id=" + id, cache: false, data: "{'id':'" + id_cont + "'}", dataType: 'json', }).done(function(retorno){ if (retorno.inserido == true) { $('#md_edit_pes_cpf').val(retorno.dados.cpf); // Atualizo valor campo cpf $("#md_edit_pes_cpf").mask("999.999.999-99"); // Adiciono máscara cpf } .......... Em relação aos dados está funcionando corretamente.
      O problema é em relação às máscaras de entrada dos campos (cpf) que na primeira vez que for alterar os dados está vindo corretamente, porém, caso tente alterar novamente os dados da mesma pessoa, a máscara não funciona (não vem formatado corretamente).
      Outro detalhe é  que o modal não está sendo resetado (limpo), principalmente após tentativa de edição e ser mostrada mensagem do arquivo PHP que faz a validação dos dados inseridos, uma vez que ao fechar o modal e ao reabri-lo novamente continua mostrando a mensagem de validação, o que eu não gostaria que acontecesse, mas que cada vez que o modal fosse fechado ou finalizado, limpassem os seus dados, para novamente serem carregados após clicar no botão de edição.
      Partes do código que faço a validação do modal:
       
      var serialize_dados = $('#form_mod_pes_edit_red').serialize(); $.ajax({ type: "POST", url: "arquivo_validar.php", data: serialize_dados, dataType: 'json', encode: true, cache: false, }).done(function(retorno){ if (retorno.inserido == true) { $("#mensagem_edit_pes_red").html("Cadastro alterado com sucesso!"); //auto.trigger('click'); $('#form_mod_pes_edit_red').each (function(){ // Limpar campos do Form this.reset(); $('#mensagem_edit_pes_red').html(""); $('#form_mod_pes_edit_red')[0].reset(); }); setTimeout(function () { //$('#modal_edit_pessoa_red').on("hidden.bs.modal", function(){ $(this).removeData(); }); $('#mensagem_edit_pes_red').html(""); // Limpa mensagens $('#modal_edit_pessoa_red').modal('hide') //$('#form_mod_pes_edit_red').on('hidden.bs.modal', function () { //$('#modal_edit_pessoa_red').on('hidden.bs.modal', function(){ $(this).find('form')[0].reset(); }); }, 2000); // 2seg $('#obs_ped').val("Endereço: "+ retorno.dados.endereco+ " Telefone: "+ retorno.dados.telefone); } else{ if (retorno.erros){ $('#mensagem_edit_pes_red').html(""); for(var i=0;i<retorno.erros.length;i++) { $('#mensagem_edit_pes_red').append(retorno.erros[i] + "<br>"); } } else{ $("#mensagem_edit_pes_red").html("Não foi possível completar o cadastro. Tente novamente!"); } } }); Já tentei de várias maneiras, porém não consigo encontrar a solução.
      No botão fechar do modal também inseri vários códigos para tentar limpar o modal ao sair, porém não obtive sucesso.
      Se alguém tiver alguma dica, agradeço.
    • By Rengavitp
      Boa noite pessoal, estou aprendendo web e estou passando trabalho com uma janela modal. na versão desktop para que o modal apareça direito preciso colocar varios <br> antes do footer se não ele fica perdido no meio do modal, ja na versão mobile ele fica com um espação antes do footer devido aos <br> se eu tiro ele acerta o mobile mas da problema no desktop. alguém pode me ajudar? abaixo o modal
      <!-- Modal Cadastrar--> <div class="modal fade" id="novo_cadastro" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Novo Associado</h4> </div> <div class="modal-body"> <div class="col-md-2"> <label for="c_id">ID</label> <input type="text" class="form-control cadastro" id="c_id" placeholder="*" disabled=""> <br> </div> <div class="col-md-10"> <label for="c_empresa">Empresa</label> <input type="text" class="form-control cadastro" id="c_empresa" name="c_empresa" placeholder="Empresa" style="text-transform:uppercase" autocomplete="off" required> <br> </div> <div class="col-md-3"> <label for="c_cnpj">CNPJ</label> <input type="text" class="form-control cadastro" id="c_cnpj" name="c_cnpj" onkeypress="$(this).mask('00.000.000/0000-00');" placeholder="Ex.: 00.000.000/0001-00" autocomplete="off" required> <br> </div> <div class="col-md-2"> <label for="c_ie">I.E</label> <input type="text" class="form-control cadastro" id="c_ie" name="c_ie" onkeypress="$(this).mask('0.000.000');" placeholder="Ex.: 000.000.000" autocomplete="off" required> <br> </div> <div class="col-md-3"> <label for="c_ass">Contato</label> <input type="text" class="form-control cadastro" id="c_nome" name="c_nome" placeholder="Nome" style="text-transform:uppercase" autocomplete="off" required> <br> </div> <div class="col-md-4"> <label for="c_segmento">Segmento</label> <select id="c_segmento" name="c_segmento" class="form-control input-md cadastro"> <option value='1'>ALIMENTAÇÃO</option> <option value='0'>COMÉRCIO</option> </select> <br> </div> <div class="col-md-3"> <label for="c_telefone">Telefone</label> <input type="text" class="form-control cadastro" id="c_telefone" name="c_telefone" onkeypress="$(this).mask('(00) 0000-00009')" placeholder="(XX) XXXXX-XXXX" autocomplete="off" required> <br> </div> <div class="col-md-5"> <label for="c_email">E-mail</label> <input type="email" class="form-control cadastro" id="c_email" name="c_email" placeholder="XXX@XXX.com.XX" style="text-transform:lowercase" autocomplete="off" required> <br> </div> <div class="col-md-2"> <label for="c_status">Status</label> <select id="c_status" name="c_status" class="form-control input-md cadastro"> <option value='1'>ATIVO</option> <option value='0'>INATIVO</option> </select> <br> </div> <div class="col-md-2"> </div> <div class="col-md-6"> <label for="c_endereco">Endereço</label> <input type="text" class="form-control cadastro" id="c_endereco" name="c_endereco" placeholder="Endereço" style="text-transform:uppercase" autocomplete="off" required> <br> </div> <div class="col-md-2"> <label for="c_nro">Nro</label> <input type="number" class="form-control cadastro" id="c_nro" name="c_nro" placeholder="NRO" onkeypress="$(this).mask('00000')" required> <br> </div> <div class="col-md-4"> <label for="c_bairro">Bairro</label> <input type="text" class="form-control cadastro" id="c_bairro" name="c_bairro" placeholder="Bairro" style="text-transform:uppercase" autocomplete="off" required> <br> </div> <div class="col-md-4"> <label for="c_complemento">Complemento</label> <input type="text" class="form-control cadastro" id="c_complemento" name="c_complemento" placeholder="Complemento" style="text-transform:uppercase" autocomplete="off" required> <br> </div> <div class="col-md-4"> <label for="c_municipio">Município</label> <input type="text" class="form-control cadastro" id="c_municipio" name="c_municipio" placeholder="Município" style="text-transform:uppercase" autocomplete="off" required> <br> </div> <div class="col-md-2"> <label for="c_cep">Cep</label> <input type="text" class="form-control cadastro" id="c_cep" name="c_cep" placeholder="CEP" onkeypress="$(this).mask('00000-000')" autocomplete="off" required> <br> </div> <div class="col-md-2"> <label for="c_uf">UF</label> <select id="c_uf" name="c_uf" class="form-control input-md cadastro"> <option value="">Selecione</option> <option value="AC">Acre</option> <option value="AL">Alagoas</option> <option value="AP">Amapá</option> <option value="AM">Amazonas</option> <option value="BA">Bahia</option> <option value="CE">Ceará</option> <option value="DF">Distrito Federal</option> <option value="ES">Espirito Santo</option> <option value="GO">Goiás</option> <option value="MA">Maranhão</option> <option value="MS">Mato Grosso do Sul</option> <option value="MT">Mato Grosso</option> <option value="MG">Minas Gerais</option> <option value="PA">Pará</option> <option value="PB">Paraíba</option> <option value="PR">Paraná</option> <option value="PE">Pernambuco</option> <option value="PI">Piauí</option> <option value="RJ">Rio de Janeiro</option> <option value="RN">Rio Grande do Norte</option> <option value="RS">Rio Grande do Sul</option> <option value="RO">Rondônia</option> <option value="RR">Roraima</option> <option value="SC">Santa Catarina</option> <option value="SP">São Paulo</option> <option value="SE">Sergipe</option> <option value="TO">Tocantins</option> </select> <br> </div> <div class="col-md-12"> <label for="c_descricao">Descrição</label> <textarea class="form-control" id="c_descricao" name="descricao" rows="4" cols="130"></textarea> <br> </div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </div> <div class="modal-footer"> <button type="button" class="btn btn-success" id="cadastrar">Cadastrar</button><button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button> </div> </div> </div> </div>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.