ページ縮小時にブートストラップ列が重複する

Question

画面を縮小すると、これらのイメージは重なって表示されます。私はコンテナ流体または行のためのCSSに変更を加えていません。

<div class="container-fluid bg-grey"> 
    <div class="row center"> 
     <div class="col-sm-4"> 
      <img src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" /> 
     </div> 
     <div class="col-sm-4"> 
      <img src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" /> 
     </div> 
     <div class="col-sm-4"> 
      <img src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" /> 
     </div> 
    </div> 
    </div> 

オーバーラップする代わりに、イメージを重なり合わせて重ねてください。

おかげ

Answer 1

<img>要素が固定width値を持っているので、列が重複します。 col-*-*は、設定されたパーセンテージ幅を持ち、それが画像に設定された幅より小さくなるとすぐにオーバーラップが発生します。

responsiveイメージを作成するには、<img>が列の幅を超えないようにwidthプロパティを削除し、クラス.img-responsiveを使用します。それはmax-width: 100%を利用しています。

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

Answer 2

狭い画面用に列を定義する必要があります。 col-xs-12。これは、768pxより小さい画面では各列がすべての空き領域を占めるため、スタックすることを意味します。

コードでは、1行に3列、1列に33.33％の空き領域があります。さらに、固定サイズの画像を宣言しました。それらを反応させるために、ブートストラップimg-responsiveクラスを使用することができます。ただし、固定された高さと幅を先に削除する必要があります。さもなければ画像は拡大縮小されません。

Answer 3

2件の有効回答を上方および下方のいずれかで問題が解決しない場合、CSSは画像に独自のクラスを装着する属性を追加しようとは：

.myclass{max-width: 100%; height: auto;} 

Answer 4

<div class="container-fluid bg-grey"> 
    <div class="row center"> 
     <div class="col-sm-4 col-md-4 col-xs-12"> 
      <img class="img-responsive" src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" /> 
     </div> 
     <div class="col-sm-4 col-md-4 col-xs-12"> 
      <img class="img-responsive" src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" /> 
     </div> 
     <div class="col-sm-4 col-md-4 col-xs-12"> 
      <img class="img-responsive" src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" /> 
     </div> 
    </div> 
    </div>