0

何か間違っているのかどうかはわかりませんが、ブラウザーのサイズを変更すると、ブートストラップ グリッドに奇妙なバグが発生します。ピクセルの問題で発生し、サイズを変更し続けると停止します。グリッド内の画像の 1 つがずれて、一番下に移動します。失敗した写真と正常な写真を添付し​​ます。

このバグの正体と修正方法を知っている人はいますか?

不合格

それがどうあるべきか

これは私のコードです:

<section class="container-fluid">

    <div class="row">
       <div class="col-xs-12"> <img id="imgClickAndChange" src="img.jpg" onclick="changeImage(1)"/> </div>
   </div>

   <div class="row no-pad">
       <div class="col-xs-12 col-md-6 col-lg-4"> 
          <img class="grid" src="img1.jpg"/>
       </div>

       <div class="col-xs-12 col-md-6 col-lg-4"> 
          <img class="grid" src="img2.jpg"/>
       </div>

       <div class="col-xs-12 col-md-6 col-lg-4"> 
          <img class="grid" src="img1.jpg"/>
       </div>
</div>
       <div class="row no-pad">
       <div class="col-xs-12 col-md-6 col-lg-4"> 
          <img class="grid" src="img2.jpg"/>
       </div>

       <div class="col-xs-12 col-md-6 col-lg-4"> 
          <img class="grid" src="img1.jpg"/>
       </div>

       <div class="col-xs-12 col-md-6 col-lg-4"> 
          <img class="grid" src="img.jpg2"/>
       </div>
   </div>

 </section>

私が使用した唯一のcss：ところで、それはカスタマイズされたブートストラップです（しかし、私がカスタマイズしたのは、1200pxから1900pxまでの大画面の最小幅だけで、グリッドのグラッターを削除しました）

.grid { width: 100%;}

ありがとうございました。

4

2 に答える 2

2

Bootstrap をimg-responsive使用して、画像にクラスを適用して、親の幅の 100% を超えないようにしてください。

<img class="img-responsive" src="img1.jpg"/>

ドキュメント: http://getbootstrap.com/css/#images

于 2014-11-18T21:41:45.170 に答える
1

すべての画像が同じサイズの場合、問題はありません。

https://jsbin.com/muzug/1/

https://jsbin.com/muzug/1/edit?html,css,output

また、col-xs-12 を使用する必要はありません。最後に使用された最小幅クラスでは常に 100% になります。

丸め誤差の修正を追加しました。

CSS:

.row.no-pad img {width:100.1%;}
.row.no-pad [class*="col-"] {padding:0;margin-bottom:-1px}

HTML

 <section class="container-fluid">
    
    
       <div class="row no-pad">
         
           <div class="col-md-6 col-lg-4"> 
              <img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
           </div>
    
           <div class="col-md-6 col-lg-4"> 
              <img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
           </div>
         
                <div class="col-md-6 col-lg-4"> 
              <img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
           </div>
    
           <div class="col-md-6 col-lg-4"> 
              <img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
           </div>
    
           <div class="col-md-6 col-lg-4"> 
              <img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
           </div>
         
           <div class="col-md-6 col-lg-4"> 
              <img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
           </div>
    
      </div>
   </div>
于 2014-11-18T21:49:10.870 に答える