Problem with bootstrap columns occupy space in lower columns

Navigation
1

My problem is to dynamically generate columns of type "col-md-4" but if one exceeds the content as seen in the image causes the following columns to skip that space.

What I'm looking for is that it respects the space of the div above and does not move to the right. Edito: I add the structure of the div's inside each one is where I add the content. 

<div class="row">
  <div class="clearfix col-md-4">
    <!--contenido del div -->
    </div>
  <div class="clearfix col-md-4">
    <!--contenido del div -->
  </div>
  <div class="clearfix col-md-4">
    <!--contenido del div -->
  </div>
  <div class="clearfix col-md-4">
    <!--contenido del div -->
  </div>
</div>
    
asked by Abner Coronado 18.10.2016 в 17:37
source

3 answers

1

Thank you all for your help, the answer is to use the selector: nth-child

@media (min-width:768px) and (max-width: 991px) { .row > div:nth-child(2n+3) { clear: left; } } @media (min-width: 992px) and (max-width: 1199px) { .row > div:nth-child(3n+4) { clear: left; }
} @media (min-width: 1200px) { .row > div:nth-child(4n+5) { clear: left; }
}

Here is the explanation in case someone should have the same problem link

    
answered by 18.10.2016 / 19:01
source
0

You will encounter this problem when the columns have different heights. To solve it with Bootstrap, use the clearfix class with the auxiliary class type visible-resolution.

Just add the following code in front of the div: 

<div class="clearfix visible-md"></div>

That code will solve it in that resolution in question by applying a reset.

It may be that you always look good but when you go to col-sm when you look bad and the same thing happens, in that case you will have to change it by 

<div class="clearfix visible-sm"></div>
    
answered by 18.10.2016 в 17:56
0

One solution is to use another div with class row 

<div class="row">
  <div class="row">
    <div class="clearfix col-md-4">
      <!--contenido del div -->
    </div>
    <div class="clearfix col-md-4">
      <!--contenido del div -->
    </div>
    <div class="clearfix col-md-4">
      <!--contenido del div -->
    </div>
  </div>
  <div class="row">
    <div class="clearfix col-md-4">
      <!--contenido del div -->
    </div>
  </div>
</div>
    
answered by 18.10.2016 в 21:29
How can I configure environment variables within docker-compose Bring a value of a model to my view laravel