1

Tenho 3 imagens, elas ficam alinhadas certinhas, mas a partir da resolução do print abaixo elas começam a ser exibidas uma abaixo da outra mesmo tendo espaço para serem exibidas, no máximo, uma ao lado da outra e a terceira em baixo. Não sei se me fiz entender, mas estou tentando buscar um comportamento como o desse template aqui: http://www.uipasta.com/wordpress-preview/rolling/

Como o meu está: inserir a descrição da imagem aqui

HTML:

<section class="container" id="portfolio">
        <div class="row">
            <div class="col-md-12 text-center">
                <h1 class="">Portfólio</h1>
                <h3 class="subtitle">Alguns do meus trabalhos voltados para Web</h3>
            </div>
        </div>
        <div class="row ">
           <div class="col-md-4  col-sm-4  col-xs-12">
             <figure>
               <img src="img/hidrau.png" alt="Hidraurio Mangueiras Hidraulicas">
               <figcaption>
               <a href="http://hidrauriomangueiras.com.br" target="_blank"><button >Visitar</button></a>
               <a href="https://github.com/tiagosilveiraa/hidraurio" target="_blank"><button >Github</button></a>
               </figcaption>
             </figure>
           </div>
        <div class="col-md-4 col-sm-4 col-xs-12">
          <figure>
            <img src="img/gescolar.png" alt="Sistema de Gestão Escolar">
            <figcaption>
            <a href="http://tiagotestes.esy.es/Gescolar" target="_blank"><button >Visitar</button></a>
            <a href="https://github.com/tiagosilveiraa/gescolar" target="_blank"><button >Github</button></a>
            </figcaption>
          </figure>
        </div>
        <div class="col-md-4 col-sm-4 col-xs-12">
          <figure>
            <img src="img/gescolar.png" alt="Sistema de Gestão Escolar">
            <figcaption>
            <a href="http://tiagotestes.esy.es/Gescolar" target="_blank"><button >Visitar</button></a>
            <a href="https://github.com/tiagosilveiraa/gescolar" target="_blank"><button >Github</button></a>
            </figcaption>
          </figure>
        </div>
     </div>
      </section>
4
  • Tiago coloque o trecho do seu codigo tambem para conseguir uma ajuda mais facil, o que você precisa fazer ai é colocar a classe nesses tres itens que ao chegar abaixo de 800px esses elementos fiquem com width:100%; (que seria col-xs-12). So precisa conferir agora se suas classes nao vao entrar em conflito com essa. Commented 16/05/2017 às 19:27
  • Opa @italoDrago, coloquei o código e tentei o col-xs-12 mas continuou a mesma coisa :/ Commented 16/05/2017 às 19:53
  • sua imagem está com width:100%? pois se não vai ocupar todo o espaço por causa da tag figcaption que voce colocou. Troca a classe col-sm-4 por col-sm-6 também, que ai a estrutura em geral fica igual a do exemplo que mandou. Commented 16/05/2017 às 20:02
  • @italodrago, coloquei o col-sm-6 e resolveu parte do "problema" agora se eu acrescendo um col-xs-algumnúmero, ele não mostra mais os elementos um embaixo do outro, se eu não colocar nenhum col-xs ele resolve apenas até uma certa resolução. Commented 16/05/2017 às 20:26

2 Respostas 2

2

Testei na minha maquina e funcionou agora, talvez seja o espaçamento entre as tags, tente desabilitar o cache do navegador tambem, se tiver no chrome na aba Network habilita a opção Disable Cache.

  

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Document</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>

<body>

  <section class="container" id="portfolio">
    <div class="row">
      <div class="col-md-12 text-center">
        <h1 class="">Portfólio</h1>
        <h3 class="subtitle">Alguns do meus trabalhos voltados para Web</h3>
      </div>
    </div>

    <div class="row text-center">
      <div class="col-md-4 col-sm-4 col-xs-12">
        <figure>
          <img src="http://www.ibra.com.br/wp-content/uploads/2014/05/ref_planta_crescendo.png" alt="Hidraurio Mangueiras Hidraulicas">
          <figcaption>
            <a href="http://hidrauriomangueiras.com.br" target="_blank"><button >Visitar</button></a>
            <a href="https://github.com/tiagosilveiraa/hidraurio" target="_blank"><button >Github</button></a>
          </figcaption>
        </figure>
      </div>

      <div class="col-md-4 col-sm-4 col-xs-12">
        <figure>
          <img src="http://www.ibra.com.br/wp-content/uploads/2014/05/ref_planta_crescendo.png" alt="Sistema de Gestão Escolar">
          <figcaption>
            <a href="http://tiagotestes.esy.es/Gescolar" target="_blank"><button >Visitar</button></a>
            <a href="https://github.com/tiagosilveiraa/gescolar" target="_blank"><button >Github</button></a>
          </figcaption>
        </figure>
      </div>

      <div class="col-md-4 col-sm-4 col-xs-12">
        <figure>
          <img src="http://www.ibra.com.br/wp-content/uploads/2014/05/ref_planta_crescendo.png" alt="Sistema de Gestão Escolar">
          <figcaption>
            <a href="http://tiagotestes.esy.es/Gescolar" target="_blank"><button >Visitar</button></a>
            <a href="https://github.com/tiagosilveiraa/gescolar" target="_blank"><button >Github</button></a>
          </figcaption>
        </figure>
      </div>
    </div>

  </section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Se deseja duas colunas quanto tiver de 768px a 992px adiciona col-sm-6 que resolve, faça um teste tambem !

2

Você precisa adicionar as classes col-md-4 col-sm-6 col-xs-12 nas colunas e a classe img-responsive nas imagens, vejo um exemplo:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="container" id="portfolio">
        <div class="row">
            <div class="col-md-12 text-center">
                <h1 class="">Portfólio</h1>
                <h3 class="subtitle">Alguns do meus trabalhos voltados para Web</h3>
            </div>
        </div>
        <div class="row ">
           <div class="col-md-4  col-sm-6  col-xs-12">
             <figure>
               <img src="http://placehold.it/800x600" alt="Hidraurio Mangueiras Hidraulicas" class="img-responsive">
               <figcaption>
               <a href="http://hidrauriomangueiras.com.br" target="_blank"><button >Visitar</button></a>
               <a href="https://github.com/tiagosilveiraa/hidraurio" target="_blank"><button >Github</button></a>
               </figcaption>
             </figure>
           </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
          <figure>
            <img src="http://placehold.it/800x600" alt="Sistema de Gestão Escolar" class="img-responsive">
            <figcaption>
            <a href="http://tiagotestes.esy.es/Gescolar" target="_blank"><button >Visitar</button></a>
            <a href="https://github.com/tiagosilveiraa/gescolar" target="_blank"><button >Github</button></a>
            </figcaption>
          </figure>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
          <figure>
            <img src="http://placehold.it/800x600" alt="Sistema de Gestão Escolar" class="img-responsive">
            <figcaption>
            <a href="http://tiagotestes.esy.es/Gescolar" target="_blank"><button >Visitar</button></a>
            <a href="https://github.com/tiagosilveiraa/gescolar" target="_blank"><button >Github</button></a>
            </figcaption>
          </figure>
        </div>
     </div>
      </section>

OBS: No exemplo utilizei as imagens no tamanho 800x600 para que ocupe toda a tela em dispositivos menores.

VEJA O EXEMPLO NO JSFIDDLE

1
  • 1
    Então aparentemente o problema está no tamanho das minhas imagens, pois elas estão com 350x300?? Commented 16/05/2017 às 21:38

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 .