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

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


<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
    2017-02-24 16:04:28
    А что с адаптивностью? И нужно через класс thumbnail.
  1. Александр Мальцев
    Александр Мальцев
    2017-02-24 17:04:50
    Если нужно адаптивность для различных разрешений, то используйте 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 пикселей.
  • hood
    hood
    2017-02-24 17:34:50
    Больншое Вам спасибо, для моего понимания это огромный шаг.
  • Александр Мальцев
    Александр Мальцев
    2017-02-24 15:24:33
    Тут обычная разметка. Можно сделать следующим образом:
    Код 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.