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

hood

24.02.2017, 02:53

1.1K

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

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

Изображения:

example.jpg

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

hood

24.02.2017, 16:04

А что с адаптивностью? И нужно через класс thumbnail.

Александр Мальцев

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 пикселей.

hood

24.02.2017, 17:34

Больншое Вам спасибо, для моего понимания это огромный шаг.

Александр Мальцев

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.