サイズ変更時にブートストラップカラムが機能しない

Question

ブラウザのサイズを小さくすると、カラムが機能せず、各イメージが異なる行に表示されるという問題があります。それは、ここに示されています：

をそれは、行の4枚の画像を表示大きいサイズで正しく動作しません。誰かがこれに対する修正を知っていますか？

<div class="container"> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-sm-3"> 
     <a href="#"><img src="smiley.gif" alt="Smiley face" height="267" width="187"></a> 
     </div> 
     <div class="col-sm-3"> 
     <a href="#"><img src="smiley.gif" alt="Smiley face" height="267" width="187"></a> 
     </div> 
     <div class="col-sm-3"> 
     <a href="#"><img src="smiley.gif" alt="Smiley face" height="267" width="187"></a> 
     </div> 
     <div class="col-sm-3"> 
     <a href="#"><img src="smiley.gif" alt="Smiley face" height="267" width="187"></a> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

まず、2つの容器を使用しないでください。第二に：

<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-3"> 
 
     <a href="#"><img src="https://www.w3schools.com/bootstrap/sanfran.jpg" alt="Smiley face" height="267" width="187"></a> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
     <a href="#"><img src="https://www.w3schools.com/bootstrap/sanfran.jpg" alt="Smiley face" height="267" width="187"></a> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
     <a href="#"><img src="https://www.w3schools.com/bootstrap/sanfran.jpg" alt="Smiley face" height="267" width="187"></a> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
     <a href="#"><img src="https://www.w3schools.com/bootstrap/sanfran.jpg" alt="Smiley face" height="267" width="187"></a> 
 
     </div> 
 
    </div> 
 
    </div>

予想通りcol-sm-*のみ767px上に適用されているので、これは動作します。小さな画面にはcol-xs-*を使用してください。

Answer 2

col-sm-（タブレット表示用）モバイルビューの場合はcol-xs-です。

<div class="container-fluid"> 
    <div class="row"> 
     <div class=" col-sm-3 col-xs-3"> 
     <a href="#"><img src="smiley.gif" alt="Smiley face" height="267" width="187"></a> 
     </div> 
     <div class=" col-sm-3 col-xs-3"> 
     <a href="#"><img src="smiley.gif" alt="Smiley face" height="267" width="187"></a> 
     </div> 
     <div class=" col-sm-3 col-xs-3"> 
     <a href="#"><img src="smiley.gif" alt="Smiley face" height="267" width="187"></a> 
     </div> 
     <div class=" col-sm-3 col-xs-3"> 
     <a href="#"><img src="smiley.gif" alt="Smiley face" height="267" width="187"></a> 
     </div> 
    </div> 
    </div> 

Answer 3

imgタグからwidth = "187"とheight = "267"を削除してください。この代わりに、style = "max-width：187 px; width：100％;" imgタグ付き。私はそれがうまくいくと思います。してみてください。 モバイルデバイスでは、1つの行に4つのイメージを表示するには、 "col-x3-3"クラスを "col-sm3"で追加する必要があります。