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

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


<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>

Комментарии ()

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