Макет бутстрапа с разной высотой карты ломается при некоторых разрешениях

Я работал над макетом Bootstrap, в котором есть как обычные, так и избранные эскизы. У меня есть один большой большой палец в начале, который работает нормально, но второй, который смещен вправо, в некоторых разрешениях нарушает макет.

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

Вот макет:

HTML

img {
  width: 100%;
  height: auto;
}
.row [class*=col-] {
  padding: 1%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
   <div class="row">
      <div class="col-sm-6 col-md-6 col-lg-4">
         <img src="https://d1i6itcsqouwzx.cloudfront.net/cms/images/jackpotGameThumbs/ISBKobushi.jpg">
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
         <img src="https://d1i6itcsqouwzx.cloudfront.net/cms/images/games/provider-id-11/G170191.jpg">
      </div>
      <div class="col-xs-6  col-sm-3 col-md-3 col-lg-2">
         <img class="thumb" src="https://d1i6itcsqouwzx.cloudfront.net/cms/images/games/provider-id-3/PGBookOfDead.jpg">
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
         <img class="thumb" src="https://d1i6itcsqouwzx.cloudfront.net/cms/images/games/provider-id-6/BSFruitZen.jpg">
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
         <img class="thumb" src="https://d1i6itcsqouwzx.cloudfront.net/cms/images/games/provider-id-6/BSBoomanji.jpg">
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
         <img class="thumb" src="https://d1i6itcsqouwzx.cloudfront.net/cms/images/games/provider-id-11/G170191.jpg">
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
         <img class="thumb" src="https://d1i6itcsqouwzx.cloudfront.net/cms/images/games/provider-id-3/PGBookOfDead.jpg">
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
         <img class="thumb"src="https://d1i6itcsqouwzx.cloudfront.net/cms/images/games/provider-id-6/BSFruitZen.jpg">
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
         <img class="thumb" src="https://d1i6itcsqouwzx.cloudfront.net/cms/images/games/provider-id-6/BSBoomanji.jpg">
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
         <img src="https://d1i6itcsqouwzx.cloudfront.net/cms/images/games/provider-id-11/G170191.jpg">
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
         <img class="thumb" src="https://d1i6itcsqouwzx.cloudfront.net/cms/images/games/provider-id-3/PGBookOfDead.jpg">
      </div>
     <div class="col-sm-6 col-md-6 col-lg-4 pull-right">

CSS

img {
  width: 100%;
  height: auto;
}
.row [class*=col-] {
  padding: 1%;
}

Можете ли вы показать структуру, на которую вы рассчитываете, и что вы получаете

Adesh Kumar 10.09.2018 07:31

Не могли бы вы поместить свой код, используя рабочий фрагмент

core114 10.09.2018 07:34

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

Adrian 10.09.2018 08:12
0
3
40
0

Другие вопросы по теме