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

hood
hood
1.1K
4
Пожалуйста помогите разобраться с колонками, не могу сделать как на рисунке, битый час пробую, всё время средняя колонка, то больше то меньше остальных. Как сделать так, чтобы колонки с изображениями внутри располагались именно такой плиткой?
<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>
Изображения:

Комментарии: 4

  1. hood
    hood
    24.02.2017, 16:04
    А что с адаптивностью? И нужно через класс thumbnail.
    1. Александр Мальцев
      Александр Мальцев
      24.02.2017, 17:04
      Если нужно адаптивность для различных разрешений, то используйте media запросы или задавайте ширину в процентах.

      Адаптировать решение для xs можно так:
      <div id="container" class="container-fluid">
        <div class="row">
          <!-- Первый столбец -->
          <div id="left" class="col-sm-4">
            <div class="h410">
              <a href="#" class="thumbnail">
                <img src="https://placehold.it/375x420" alt="...">
              </a>
            </div>
            <div class="h200">
              <a href="#" class="thumbnail">
                <img src="https://placehold.it/375x200" alt="...">
              </a>
            </div>
          </div>
          <!-- Второй столбец -->
          <div id="middle" class="col-sm-4">
            <div class="h200">
              <a href="#" class="thumbnail">
                <img src="https://placehold.it/370x200" alt="...">
              </a>
            </div>
            <div class="h200">
              <a href="#" class="thumbnail">
                <img src="https://placehold.it/370x200" alt="...">
              </a>
            </div>
            <div class="h200">
              <a href="#" class="thumbnail">
                <img src="https://placehold.it/370x200" alt="...">
              </a>
            </div>
          </div>
          <!-- Третий столбец -->
          <div id="right" class="col-sm-4">
            <div class="h200">
              <a href="#" class="thumbnail">
                <img src="https://placehold.it/375x200" alt="...">
              </a>
            </div>
            <div class="h410">
              <a href="#" class="thumbnail">
                <img src="https://placehold.it/375x420" alt="...">
              </a>	  
            </div>
          </div>
        </div>
      </div>
      
      Стили CSS:
      @media only screen and (min-width: 768px) {
        #container {
          margin: 0 auto;
          width: 1190px;
          padding-left: 10px;
          padding-right: 10px;	  
        }
        #container .row {
          margin-left: -10px;
          margin-right: -10px;	  
        }	
        #container .col-sm-4 {
          padding-left: 0px;
          padding-right: 0px;	  
        }
        #left {
          width: 385px;
          margin-left: 10px;
        }
        #right {
          width: 385px;
          margin-right: 10px;
        }
        #middle {
          width: 380px;
          margin-left: 10px;
          margin-right: 10px;
        }
        #container div.col-sm-4>div:not(:first-child) {
          margin-top: 10px;
        }
        .thumbnail {
          margin-bottom: 10px;
        }
        .h410 {
          height: 430px;
        }
        .h200 {
          height: 210px;
        }
      }
      
      @media only screen and (max-width: 767px) {
        .h410, .h200 {
          text-align:center;	
        }
        .thumbnail {
          display: inline-block;
          margin-bottom: 10px;
        }
      }  
      
      Единственно, что высота изображения не получится равной 410 пикселей, т.к. класс tumbnails имеет рамку в 5 пикселей. Следовательно, высота изображения будет составлять 420 пикселей.
    2. hood
      hood
      24.02.2017, 17:34
      Больншое Вам спасибо, для моего понимания это огромный шаг.
  2. Александр Мальцев
    Александр Мальцев
    24.02.2017, 15:24
    Тут обычная разметка. Можно сделать следующим образом:
    Код HTML:
    <div id="container" class="container-fluid">
      <div class="row">
        <!-- Первый столбец -->
        <div id="left" class="col-xs-4">
    	  <div style="height: 410px; background-color: orange"></div>
    	  <div style="height: 200px; background-color: orange"></div>
    	</div>
        <!-- Второй столбец -->
        <div id="middle" class="col-xs-4">
    	  <div style="height: 200px; background-color: orange"></div>
    	  <div style="height: 200px; background-color: orange"></div>
    	  <div style="height: 200px; background-color: orange"></div>
    	</div>
        <!-- Третий столбец -->
        <div id="right" class="col-xs-4">
    	  <div style="height: 200px; background-color: orange"></div>
    	  <div style="height: 410px; background-color: orange"></div>
    	</div>
      </div>
    </div>
    
    Код CSS:
    #container {
      margin: 0 auto;
      width: 1160px;
      padding-left: 10px;
      padding-right: 10px;	  
    }
    #container .row {
      margin-left: -10px;
      margin-right: -10px;	  
    }
    #container .col-xs-4 {
      padding-left: 0px;
      padding-right: 0px;	  
    }
    #left {
      width: 375px;
      margin-left: 10px;
    }
    #right {
      width: 375px;
      margin-right: 10px;
    }
    #middle {
      width: 370px;
      margin-left: 10px;
      margin-right: 10px;
    }
    #container div.col-xs-4>div:not(:first-child) {
      margin-top: 10px;
    }
    
    Вместо img попробуйте использовать background url.