Макет начальной загрузки с разной высотой карты нарушается на некоторых разрешениях - PullRequest
0 голосов
/ 10 сентября 2018

Я работал над макетом 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%;
}
...