Doubt with layout Responsive bootstrap

Navigation
0

I have a layout that I would like to leave in the following template.

Tomakehimresponsive,Iamnotabletoaddcolumn(1)greater.

Howareyounow? link 

  <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>
    
asked by anonymous 10.06.2017 / 05:34

1 answer

1

Hello, I will help you to understand a little more about this system.

To achieve this division you will have to divide it twice. I realized the starting block would look like four, correct?

Being 1/4, 1/4, 1/4, and 1/4.

The most correct way is: 1º - Divide the total width into 4, and the second with the rest. 2nd - Divide the second column into three to place the smaller squares.

Example below: 

<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>
    
10.06.2017 / 14:41
Problem in SQL statement Passing data to a listview on another activity screen