0

Tenho um layout que gostaria de deixar no seguinte modelo. inserir a descrição da imagem aqui

Para deixar ele responsivo não estou conseguindo adicionar a coluna (1) maior.

Como está agora http://comajudacoletiva.com.br/estudo/

  <div class="container">

  <div class="row">

     <!--
        <div class="col-sm-3 col-md-3">
            <img id="principal" src="exemplo/principal.png" class="img-responsive" >
        </div>
      -->
      
   <!--primiera linha-->
    <div class="row">
        <div class="col-sm-3 col-md-3">
            <img id="img01" src="exemplo/imagem01.png" class="img-responsive" >
        </div>
        <div class="col-sm-3 col-md-3">
            <img id="img01" src="exemplo/imagem02.png" class="img-responsive" >
         </div>
        <div class="col-sm-3 col-md-3">
            <img id="img01" src="exemplo/imagem03.png" class="img-responsive">
         </div>
    </div>
   <!-- fim primiera linha-->
    
    <!--segunda linha-->
    <div class="row">
        <div class="col-sm-3 col-md-3">
            <img id="img01" src="exemplo/imagem01.png" class="img-responsive" >
        </div>
        <div class="col-sm-3 col-md-3">
            <img id="img01" src="exemplo/imagem02.png" class="img-responsive" >
         </div>
        <div class="col-sm-3 col-md-3">
            <img id="img01" src="exemplo/imagem03.png" class="img-responsive">
         </div>
    </div>
   <!--fim segunda linha-->  


    
    <!--terceira linha -->  
    <div class="row">
        <div class="col-sm-3 col-md-3">
            <img id="img01" src="exemplo/imagem01.png" class="img-responsive" >
        </div>
        <div class="col-sm-3 col-md-3">
            <img id="img01" src="exemplo/imagem02.png" class="img-responsive" >
         </div>
        <div class="col-sm-3 col-md-3">
            <img id="img01" src="exemplo/imagem03.png" class="img-responsive">
         </div>
    </div>
    <!--fim terceira linha--> 

  </div>

  <!--fim do conteiner-->
 </div>  

1 Resposta 1

1

Olá, irei te ajudar a entender um pouco mais deste sistema.

Para conseguir esta divisão você terá que dividir duas vezes. Percebi que o bloco inicial ficaria são quatro, correto?

Sendo 1/4, 1/4, 1/4, e 1/4.

A maneira mais correta é: 1º - Dividir a largura total em 4, e a segunda com o resto. 2º - Dividir a segunda coluna em três para colocar os quadrados menores.

Exemplo abaixo:

<div class="container" style="padding-top: 10px;">
        <!-- Divisão em 1/4 -->
        <div class="col-sm-12 col-md-3">
            <div style="background: #e0e0e0; margin: 10px; height: 400px;"></div>
        </div>

        <!-- Divisão com o resto -->
        <div class="col-sm-12 col-md-9 quadradinhos">
            <div class="col-sm-12 col-md-3"> Conteúdo</div>
            <div class="col-sm-12 col-md-3"> Conteúdo</div>
            <div class="col-sm-12 col-md-3"> Conteúdo</div>

            <div class="col-sm-12 col-md-3"> Conteúdo</div>
            <div class="col-sm-12 col-md-3"> Conteúdo</div>
            <div class="col-sm-12 col-md-3"> Conteúdo</div>

            <div class="col-sm-12 col-md-3"> Conteúdo</div>
            <div class="col-sm-12 col-md-3"> Conteúdo</div>
            <div class="col-sm-12 col-md-3"> Conteúdo</div>
        </div>

    </div>

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 .