Как сделать margin-top для col-xs строк bootstrap-а?

219

14 октября 2017, 18:28

Вот такой вод код используется для отображения данных:

<div class="site-index">
<div class="container">
<div class="row">
    <div class="col-xs-4">
        <a href="#" class="thumbnail">
        <img src="http://placehold.it/350x400" alt="..." />
        </a>
    </div>
    <div class="col-xs-4">
        <a href="#" class="thumbnail">
        <img src="http://placehold.it/350x200" alt="..." />
        </a>
    </div>
    <div class="col-xs-4">
        <a href="#" class="thumbnail">
        <img src="http://placehold.it/350x250" alt="..." />
        </a>
    </div>
    <div class="col-xs-4">
         <a href="#" class="thumbnail">
        <img src="http://placehold.it/350x150" alt="..." />
        </a>
    </div>
      <div class="col-xs-4">
         <a href="#" class="thumbnail">
        <img src="http://placehold.it/350x150" alt="..." />
        </a>
    </div>
     <div class="col-xs-4">
         <a href="#" class="thumbnail">
        <img src="http://placehold.it/350x150" alt="..." />
        </a>
    </div>
     <div class="col-xs-4">
         <a href="#" class="thumbnail">
        <img src="http://placehold.it/350x150" alt="..." />
        </a>
    </div>
</div>

получаем вот это:

а мне нужен вот такой результат:

который можно достичь вот таким кодом:

<div class="site-index">
<div class="container">
<div class="row">
    <div class="col-xs-4">
        <a href="#" class="thumbnail">
        <img src="https://placehold.it/350x400" alt="...">
        </a>
    </div>
    <div class="col-xs-4">
        <a href="#" class="thumbnail">
        <img src="https://placehold.it/350x200" alt="...">
        </a>
    </div>
    <div class="col-xs-4">
        <a href="#" class="thumbnail">
        <img src="https://placehold.it/350x250" alt="...">
        </a>
    </div>
    <div class="col-xs-4" style="margin-top: -50px;">
       <a href="#" class="thumbnail">
        <img src="https://placehold.it/350x150" alt="...">
        </a>
    </div>
      <div class="col-xs-4">
         <a href="#" class="thumbnail">
        <img src="https://placehold.it/350x150" alt="...">
        </a>
    </div>
     <div class="col-xs-4" style="margin-top: -30px;">
         <a href="#" class="thumbnail">
        <img src="https://placehold.it/350x150" alt="...">
        </a>
    </div>
     <div class="col-xs-4" style="margin-top: -50px;">
         <a href="#" class="thumbnail">
        <img src="https://placehold.it/350x150" alt="...">
        </a>
    </div>
</div>

(добавил маргин топы) а как решать эту проблему автоматически? полное решение мне не обязательно, нужно только направление(или алгоритм)

Answer 1

Можно использовать https://masonry.desandro.com/ или поменять структуру вашего html кода

.img-wrap { 
  margin: 0 0 5px 0; 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
<div class="site-index"> 
  <div class="container"> 
    <div class="row"> 
      <div class="col col-xs-4"> 
        <div class="img-wrap"><a href="#" class="thumbnail"> 
        <img src="http://placehold.it/350x400" alt="..." class="img-thumbnail" /> 
        </a></div> 
        <div class="img-wrap"><a href="#" class="thumbnail"> 
        <img src="http://placehold.it/350x150" alt="..." class="img-thumbnail" /> 
        </a></div> 
      </div> 
      <div class="col col-xs-4"> 
        <div class="img-wrap"><a href="#" class="thumbnail"> 
        <img src="http://placehold.it/350x200" alt="..." class="img-thumbnail" /> 
        </a></div> 
        <div class="img-wrap"><a href="#" class="thumbnail"> 
        <img src="http://placehold.it/350x150" alt="..." class="img-thumbnail" /> 
        </a></div> 
        <div class="img-wrap"><a href="#" class="thumbnail"> 
        <img src="http://placehold.it/350x150" alt="..." class="img-thumbnail" /> 
        </a></div> 
      </div> 
      <div class="col col-xs-4"> 
        <div class="img-wrap"><a href="#" class="thumbnail"> 
        <img src="http://placehold.it/350x250" alt="..." class="img-thumbnail" /> 
        </a></div> 
        <div class="img-wrap"><a href="#" class="thumbnail"> 
        <img src="http://placehold.it/350x150" alt="..." class="img-thumbnail" /> 
        </a></div> 
      </div> 
    </div>