leandrosv 0 Denunciar post Postado Novembro 30, 2017 Boa tarde pessoal! Novato em programação, estou tentando a dias alinhar essas imagens com css e bootstrap mas não esta funcionando, como esta no arquivo .png. Será que vocês conseguem me dar alguma dica de como alinhar essas imagens? Quero fazer tipo um álbum de fotos para mim aprender, depois vou aprender o js e ficar testando. Obrigado! **As imagens não estão no mesmo tamanho, fiz meio rápido no fw sem observar os detalhes. **Aos administradores do fórum, se eu estiver postando no lugar errado, me desculpem. Compartilhar este post Link para o post Compartilhar em outros sites
Public2004 79 Denunciar post Postado Novembro 30, 2017 Boas, com Bootstrap (v3.3.7) basicamente é isso: <div class="container"> <div class="row"> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <img class="img-responsive" src="http://placehold.it/400x267"> </div> </div> </div> E para cada nova imagem, utilize esse conjunto dentro da div "row" como acima: <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <img class="img-responsive" src="http://placehold.it/400x267"> </div> Fica exatamente como quer. Se estiver utilizando a versão mais recente (v4.0) avisa aí pq esse não serve. Att. Compartilhar este post Link para o post Compartilhar em outros sites
Aphrodi 10 Denunciar post Postado Dezembro 1, 2017 Eu não gosto da utilização do bootstrap então fiz sem para você estudar um pouco: Ta bem cru pois dependendo da onde você usar, você tem que adaptar. <!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> *{ margin: 0; padding: 0; } body { background: #c1c1c1; } .linha img{ width: 100px; height: 100px; padding: 5px; } </style> <body> <content> <div class="linha"> <img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg"> <img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg"> <img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg"> <img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg"> </div> <div class="linha"> <img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg"> <img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg"> <img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg"> <img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg"> </div> <div class="linha"> <img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg"> <img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg"> <img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg"> <img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg"> </div> <div class="linha"> <img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg"> <img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg"> <img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg"> <img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg"> </div> </content> </body> </html> Compartilhar este post Link para o post Compartilhar em outros sites
leandrosv 0 Denunciar post Postado Janeiro 22, 2018 Obrigado aphodi e public2004. estou usando a nova versão do bootstrap, vou procurar sobre a versao 3, ai talvez fique melhor de fazer. Obrigadoo :D Compartilhar este post Link para o post Compartilhar em outros sites
Matheus Tavares 167 Denunciar post Postado Janeiro 22, 2018 5 minutos atrás, leandrosv disse: estou usando a nova versão do bootstrap, vou procurar sobre a versao 3, ai talvez fique melhor de fazer Não faça isso. As diferenças de uso são sutis. Além disso com o exemplo do @Public2004 já deveria funcionar para você na v4. Na versão 4 você também pode usar flexbox para isso: https://getbootstrap.com/docs/4.0/utilities/flex/ Mas no seu caso, eu ainda faria o layout sem nenhuma ferramenta, com o intuito de estudar HTML/CSS puros. Depois você volta para o Bootstrap. Compartilhar este post Link para o post Compartilhar em outros sites
leandrosv 0 Denunciar post Postado Janeiro 22, 2018 hmmm, blz! Obrigado pela dica @Matheus Tavares. Vou começar então sem framework, aprender bem e depois passar para o frame! Obrigado :D Compartilhar este post Link para o post Compartilhar em outros sites
