Bootstrap 3. Помогите разобраться с колонками

224
25 февраля 2017, 03:45

Пожалуйста помогите разобраться с колонками, не могу сделать как на рисунке, битый час пробую, всё время средняя колонка, то больше то меньше остальных. Как сделать так, чтобы колонки с изображениями внутри располагались именно такой плиткой?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel=stylesheet> 
<div class="container"> 
  <div class="row"> 
    <div class="left-col hidden-xs col-sm-4"> 
      <div class="thumbnail"> 
        <img src="images/Pic1.jpg" alt="..."> 
      </div> 
      <div class="thumbnail"> 
        <img src="images/Pic2.jpg" alt="..."> 
      </div> 
    </div> 
    <div class="middle-col col-sm-4"> 
      <div class="thumbnail"> 
        <img src="images/Pic3.jpg" alt="..."> 
      </div> 
      <div class="thumbnail"> 
        <img src="images/Pic4.jpg" alt="..."> 
      </div> 
      <div class="thumbnail"> 
        <img src="images/Pic5.jpg" alt="..."> 
      </div> 
    </div> 
    <div class="right-col hidden-xs col-sm-4"> 
      <div class="thumbnail"> 
        <img src="images/Pic6.jpg" alt="..."> 
      </div> 
      <div class="thumbnail"> 
        <img src="images/Pic7.jpg" alt="..."> 
      </div> 
    </div> 
  </div> 
</div>

Answer 1

как вариант

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
.container-custom { 
  padding-right: 5px; 
  padding-left: 5px; 
} 
 
.container-custom .row { 
  margin-left: -5px; 
  margin-right: -5px; 
} 
 
.container-custom .row [class*=col-] { 
  padding-left: 5px; 
  padding-right: 5px; 
} 
 
.container-custom .thumbnail { 
  margin-bottom: 10px; 
  padding: 0 0 53.05%; 
  position: relative; 
  height: 0; 
  overflow: hidden; 
} 
 
.container-custom .thumbnail-1 { 
  padding: 0 0 109.33%; 
} 
 
.container-custom .thumbnail-2 { 
  padding: 0 0 53.33%; 
} 
 
.container-custom .thumbnail>img { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
} 
 
.thumbnail-custom { 
  margin-top: calc(-53.33% - 10px); 
}
<div class="container container-custom"> 
  <div class="row"> 
    <div class="col-lg-4 col-md-4 col-sm-4"> 
      <div class="thumbnail thumbnail-1"> 
        <img src="http://placehold.it/375x410" alt=""> 
      </div> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-4"> 
      <div class="thumbnail"> 
        <img src="http://placehold.it/370x200" alt=""> 
      </div> 
      <div class="thumbnail"> 
        <img src="http://placehold.it/370x200" alt=""> 
      </div> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-4"> 
      <div class="thumbnail thumbnail-2"> 
        <img src="http://placehold.it/375x200" alt=""> 
      </div> 
    </div> 
  </div> 
  <div class="row"> 
    <div class="col-lg-4 col-md-4 col-sm-4"> 
      <div class="thumbnail"> 
        <img src="http://placehold.it/375x200" alt=""> 
      </div> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-4"> 
      <div class="thumbnail"> 
        <img src="http://placehold.it/370x200" alt=""> 
 
      </div> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-4"> 
      <div class="thumbnail thumbnail-1 thumbnail-custom"> 
        <img src="http://placehold.it/375x410" alt=""> 
      </div> 
    </div> 
  </div> 
  <div class="row"> 
    <div class="col-lg-4 col-md-4 col-sm-4"> 
      <div class="thumbnail thumbnail-1"> 
        <img src="http://placehold.it/375x410" alt=""> 
      </div> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-4"> 
      <div class="thumbnail"> 
        <img src="http://placehold.it/370x200" alt=""> 
      </div> 
      <div class="thumbnail"> 
        <img src="http://placehold.it/370x200" alt=""> 
      </div> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-4"> 
      <div class="thumbnail thumbnail-2"> 
        <img src="http://placehold.it/375x200" alt=""> 
      </div> 
    </div> 
  </div> 
  <div class="row"> 
    <div class="col-lg-4 col-md-4 col-sm-4"> 
      <div class="thumbnail"> 
        <img src="http://placehold.it/375x200" alt=""> 
      </div> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-4"> 
      <div class="thumbnail"> 
        <img src="http://placehold.it/370x200" alt=""> 
 
      </div> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-4"> 
      <div class="thumbnail thumbnail-1 thumbnail-custom"> 
        <img src="http://placehold.it/375x410" alt=""> 
      </div> 
    </div> 
  </div> 
</div>

READ ALSO
Шаблон сайта на node.js
HTML

Шаблон сайта на node.js

Подскажите, как шаблон сайта (html+css с картинками) натянуть на node+express ? Порекомендуйте инструкцию, туториал

 697
Как спарсить html код который весь в тексте без тегов?
HTML

Как спарсить html код который весь в тексте без тегов?

Как спарсить данный текст таким образом чтобы получить не Категория: а сам текст

 217
Появляется пробел в конце кода php
HTML

Появляется пробел в конце кода php

Ситуация следующая: при вставке кода для смены сцветовой гаммы на странице WordPress в конце появляется пустой символВот как это выглядит: [![Отладчик...

 287
Не работает jquery.validate.js
HTML

Не работает jquery.validate.js

Два проекта: основной и тестовыйВ тестовом обычно только временные файлы, где производятся, к примеру, тесты готового кода

 300