小さな画面で次の行に移動するのを避けてください。ブートストラップ3

Question

私は頭が丸くならないという問題があります。

私は3つの画像の2つの行を持っています。私が望むのは841px以下の画面で、列は50％にする必要があります.3行の行であるため、これはうまく動作しますが、モバイルでは2-1と2-1があります。 2行目は新しい行から始まりますが、これはおそらく起こることを意図していますが、疑問はそれを避ける方法です。

私は何を意味するかを示すためにjsfiddleを設定しました。私は3の右にあるギャップを埋めるように画像4を作り、すべての画像がギャップなしで連続した順序になるようにします。私はそれを引っ張っても運がないかどうかを見るために左に画像を浮かべてみました。ブートストラップで

JSFIDDLE

HTML

<div class="row"> 
<div class="col-xs-4"> 
    <a href="#"><img src="https://s32.postimg.org/hm1cb910x/image.jpg" alt="" class="img-responsive margin-bottom"/></a> 
</div> 

<div class="col-xs-4"> 
    <a href="#"><img src="https://s32.postimg.org/f5zixeiy9/image.jpg" alt="" class="img-responsive margin-bottom"/></a> 
</div> 

<div class="col-xs-4"> 
    <a href="#"><img src="https://s32.postimg.org/aldcigz8x/image.jpg" alt="" class="img-responsive margin-bottom"/></a> 
</div> 
</div> 

<div class="row"> 
<div class="col-xs-4"> 
    <a href="#"><img src="https://s32.postimg.org/kjyb4y8oh/image.jpg" alt="" class="img-responsive margin-bottom"/></a> 
</div> 

<div class="col-xs-4"> 
    <a href="#"><img src="https://s32.postimg.org/duwd2ocq9/image.jpg" alt="" class="img-responsive margin-bottom"/></a> 
</div> 

<div class="col-xs-4"> 
    <a href="#"><img src="https://s32.postimg.org/o68pvc4fl/image.jpg" alt="" class="img-responsive margin-bottom"/></a> 
</div> 
</div> 

CSS

.margin-bottom { 
padding-bottom:20px; 
} 

@media (max-width: 841px) { 
.col-xs-4 { 
width:50%; 
} 
} 

@media (max-width: 511px) { 
.col-xs-4 { 
width:100%; 
} 

}

Answer 1

Fixed fiddle

これは、あなたが一緒に複数の列クラス を使用する必要がある状況です。

画面モバイルデバイス上の

xs作品のために画面にaccoroding。

sm例えば、錠剤。

mdメディアデバイス

lg大きなデスクトップ

私はあなたのカスタムCSSコードを削除するようにアドバイス。

<div class="col-xs-6 col-sm-4 col-md-3"> 
    <a href="#"><img src="https://s32.postimg.org/o68pvc4fl/image.jpg" alt="" class="img-responsive margin-bottom"/></a> 
</div> 

は

Answer 2

それらはすべてのデバイスGRID SYSTEM FOR Mobile, tablet, desktopため、グリッドシステム内の別々のクラスがあります。超小型デバイスの場合はcol-xs、中型デバイスの場合はcol-md、小型デバイスの場合はcol-smです。

Updated Fiddle

<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-4"> 
    <a href="#"><img src="https://s32.postimg.org/hm1cb910x/image.jpg" alt="" class="img-responsive margin-bottom"/></a> 
    </div> 

    <div class="col-xs-12 col-sm-6 col-md-4"> 
    <a href="#"><img src="https://s32.postimg.org/f5zixeiy9/image.jpg" alt="" class="img-responsive margin-bottom"/></a> 
    </div> 

    <div class="col-xs-12 col-sm-6 col-md-4"> 
    <a href="#"><img src="https://s32.postimg.org/aldcigz8x/image.jpg" alt="" class="img-responsive margin-bottom"/></a> 
    </div> 
</div> 

すべての画像部が完全行を取るのNO x-小画面では、それは行他のいずれかの2を取る小さな画面がラップされ、行における媒体3にされます。