0

   <div class="row gallery">
          <div class="col-md-3 col-xs-6 col-sm-3">
            <img src="img/gallery1.png" alt="">
            <img src="img/gallery5.png" alt="">
            <img src="img/gallery9.png" alt="">
          </div>
          <div class="col-md-3 col-xs-6 col-sm-3">
            <img src="img/gallery2.png" alt="">
            <img src="img/gallery6.png" alt="">
            <img src="img/gallery10.png" alt="">
          </div>
          <div class="col-md-3  col-xs-6 col-sm-3">
            <img src="img/gallery3.png" alt="">
            <img src="img/gallery7.png" alt="">
            <img src="img/gallery11.png" alt="">
          </div>
          <div class="col-md-3 col-xs-6 col-sm-3">
            <img src="img/gallery4.png" alt="">
            <img src="img/gallery8.png" alt="">
            <img src="img/gallery12.png" alt="">
          </div>
        </div>

введите сюда описание изображения

3 колонка уежает вправо образуется непонятная пустота

2 ответа 2

2

Думаю надо добавить к каждому блоку изображений блок-row

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.gallery img{
  width: 100px;
  height: 100px;
}
<div class="container-fluid">
    <div class="row gallery">
          <div class="col-md-6 col-sm-6 col-xs-12">
              <img src="http://www.stereobaza.com/wp-content/uploads/2017/05/2017-05-05-stereobaza100.png" alt="1">
              <img src="https://vignette.wikia.nocookie.net/avali/images/7/7d/2-graphic.png/revision/latest?cb=20140201072016">
              <img src="http://pngimg.com/uploads/number3/number3_PNG14994.png">
          </div>
    </div>  
    <div class="row gallery">
          <div class="col-md-6 col-sm-6 col-xs-12">
              <img src="http://www.stereobaza.com/wp-content/uploads/2017/05/2017-05-05-stereobaza100.png" alt="1">
              <img src="https://vignette.wikia.nocookie.net/avali/images/7/7d/2-graphic.png/revision/latest?cb=20140201072016">
              <img src="http://pngimg.com/uploads/number3/number3_PNG14994.png">
          </div>
    </div> 
    <div class="row gallery">
            <div class="col-md-6 col-sm-6 col-xs-12">
              <img src="http://www.stereobaza.com/wp-content/uploads/2017/05/2017-05-05-stereobaza100.png" alt="1">
              <img src="https://vignette.wikia.nocookie.net/avali/images/7/7d/2-graphic.png/revision/latest?cb=20140201072016">
              <img src="http://pngimg.com/uploads/number3/number3_PNG14994.png">
            </div>
    </div> 
</div>

0
0

Используя bootstrap, новички пребывают в небольшом неведении, а именно, что bootstrap будет за них исправлять все ошибки - как стратегические, так и тактические))) В данном случае достаточно внимательно посмотреть пример использования галереи от разработчиков bootstrap, чтобы понять, что ВСЕ картинки имеют одинаковую высоту! Как вы в своем случае будете это делать - есть несколько путей. И это тактика! А стратегия - которая в вашем случае ошибочна - это то, что вы пихаете в магазин разновеликие с разными пропорциями картинки! Это как минимум полное пренебрежение потенциальными клиентами! Для магазина товары надо готовить! И картинка товара - это часть товара!!!

2
  • почему тогда на всех расширения нормально? а только мобильная глючит Тем более посмотрел галерею там есть с разной высотой картинки
    – bad code
    5 авг 2018 в 11:17
  • @Vlad467 смотрите в DevTools, и задайте картинкам width: 100% и дополнительно max-width: - размер укажите реальный тот который у картинок
    – Bert
    5 авг 2018 в 12:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.