デスクトップ上に5列のイメージがあり、モバイルブートストラップで4列になる

Question

私は今、ウェブサイトでやっています。私は助けが必要です。私のウェブサイトには、デスクトップ用の5つの列イメージを持つコンテンツがあり、モバイル上にあるときは4列になります。私はブートストラップで、ここに私のコードです。ありがとうございました。 COL-MD-2が適用されるように

<div class="mainBrands ">   
    <div class="brands"> 
    <p>BRANDS<p> 
    </div> 
    <hr> 
    <div class="brandlogo"> 
     <div class="col-md-2 col-sm-3 col-xs-3"> 
      <img src="public/images/logo.png"> 
     </div> 
     <div class="col-md-2 col-sm-3 col-xs-3"> 
      <img src="public/images/logo.png"> 
     </div> 
     <div class="col-md-2 col-sm-3 col-xs-3"> 
      <img src="public/images/logo.png"> 
     </div> 
     <div class="col-md-2 col-sm-3 col-xs-3"> 
      <img src="public/images/logo.png"> 
     </div> 
     <div class="col-md-2 col-sm-3 col-xs-3"> 
      <img src="public/images/logo.png"> 
     </div> 
    </div> 
</div> 

Answer 1

デスクトップで画面が大きくなります、ブートストラップグリッドは、12以上の新しい行になり、12まで追加することができます。したがって、モバイルでは4行（4x3 = 12）しか見なかったので、5番目の行は新しい行にラップされます。 これらをすべて2に設定すると修正されます。

常に1つの行が12列に分割されることに注意してください。ですから、col-xs-2にcol-xs-2 col-xs-offset-1として第一を設定する5項目、他の4セットをしたい、それが11 COLなので、最後に別のブートストラップが応答、モバイル最初が含まれ、プレースホルダcol-xs-1

グリッドシステム

としてデバイスまたはビューポートサイズが増加するにつれて、12カラムまで適切に拡大縮小された流体グリッドシステム。簡単なレイアウトオプションのための定義済みのクラスだけでなく、より意味のあるレイアウトを生成するための強力なミックスインも含まれています。

REF：http://getbootstrap.com/css/#grid

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="mainBrands "> 
 
    <div class="brands"> 
 
    <p>BRANDS 
 
     <p> 
 
    </div> 
 
    <hr> 
 
    <div class="brandlogo"> 
 
    <div class="col-xs-2 col-xs-offset-1"> 
 
     <img src="public/images/logo.png"> 
 
    </div> 
 
    <div class="col-xs-2"> 
 
     <img src="public/images/logo.png"> 
 
    </div> 
 
    <div class="col-xs-2"> 
 
     <img src="public/images/logo.png"> 
 
    </div> 
 
    <div class="col-xs-2"> 
 
     <img src="public/images/logo.png"> 
 
    </div> 
 
    <div class="col-xs-2"> 
 
     <img src="public/images/logo.png"> 
 
    </div> 
 
    <div class="col-xs-1"> 
 
    </div> 
 
    </div> 
 
</div>