I use bootstrap3 . The block comes out of the grid:

How the block comes out of the grid

HTML:

 <div class="row"> <div class="col-md-3 col-xs-6"> <div class="frame"><img src="img/creioane.jpg" alt="alt"></div> </div> <div class="col-md-3 col-xs-6"> <div class="frame"><img src="img/christmas.jpg" alt="alt"></div> </div> <div class="col-md-3 col-xs-6"> <div class="frame"><img src="img/hallween.jpg" alt="alt"></div> </div> <div class="col-md-3 col-xs-6"> <div class="frame"><img src="img/pomgranate.jpg" alt="alt"></div> </div> </div>

CSS:

 .frame { margin-bottom: 22px; } .frame img { width: 100%; padding: 3px; border: 1px solid #D6D6D6; }
  • codepen.io/bustexz/pen/yOxpZp?editors=1100 everything is fine, the problem seems to be with you, what style can add indentation - Vasily Barbashev
  • Yes, discard CSS classes col-md-3 col-xs-6 - Valery Emelyanov
  • one
    add real pictures to the question. for the matter is probably precisely in them - in their size, in particular. or better, use a snippet - the <> icon in the top answer editing pane. then it will be possible to reason in detail - lexxl
  • I was experimenting with sizes, a queue of pictures. - Dima Calmis
  • one
    @lexxl is right, you have in the screenshot the first picture in height more than the second, so 3 and 4 leave, align them in height and you will be happy :) - MasterAlex

3 answers 3

The point is the height of the first picture. It is 1 pixel more than the next. Pay attention to the sizes of the pictures in the example below:

 .frame { margin-bottom: 22px; } .frame img { width: 100%; padding: 3px; border: 1px solid #D6D6D6; background-color: #fff; } 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-md-3 col-xs-6"> <div class="frame"><img src="http://placehold.it/350x151" alt="alt"></div> </div> <div class="col-md-3 col-xs-6"> <div class="frame"><img src="http://placehold.it/350x150" alt="alt"></div> </div> <div class="col-md-3 col-xs-6"> <div class="frame"><img src="http://placehold.it/350x150" alt="alt"></div> </div> <div class="col-md-3 col-xs-6"> <div class="frame"><img src="http://placehold.it/350x150" alt="alt"></div> </div> </div>

    In addition to what has already been said:

    In order not to depend on the size of the pictures, add a block with clearfix and the visibility setting after the first two pictures.

     <div class="clearfix visible-xs-block visible-sm-block"></div>

    Then even with the "wrong" picture you get two even rows:

     .frame { margin-bottom: 22px; } .frame img { width: 100%; padding: 3px; border: 1px solid #D6D6D6; background-color: #fff; } 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-md-3 col-xs-6"> <div class="frame"><img src="http://placehold.it/350x151" alt="alt"></div> </div> <div class="col-md-3 col-xs-6"> <div class="frame"><img src="http://placehold.it/350x150" alt="alt"></div> </div> <div class="clearfix visible-xs-block visible-sm-block"></div> <div class="col-md-3 col-xs-6"> <div class="frame"><img src="http://placehold.it/350x150" alt="alt"></div> </div> <div class="col-md-3 col-xs-6"> <div class="frame"><img src="http://placehold.it/350x150" alt="alt"></div> </div> </div>

      Because padding and border at the picture. Try to remove it. Most likely border reason.

      • codepen.io/bustexz/pen/yOxpZp?editors=1100 gave the same example, everything is in order, something external affects the blocks, then the code is normal - Vasily Barbashev
      • left only img {width: 100%;} the result is the same. - Dima Calmis