ブートストラップでタブレットグリッドシステムを設定できません - フィドルが添付されています

Question

私はタブレット版のブートストラップグリッドシステムを手配しようとしています。 私は15のボックスを手配しています。それはデスクトップとモバイルに完全に一致していますが、タブレットの解像度に合わせて正しく設定することはできません。 col-sm-*

.newcss{ 
 
    background-color: red; 
 
    height: 120px; 
 
    width: 120px !important; 
 
    border-right: 5px solid white; 
 
    border-bottom: 5px solid white; 
 
}

<div class="row"> 
 
    <div class="col-lg-3 col-md-3 col-sm-1"></div> 
 
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss"> 
 
     <p>Box 1</p> 
 
    </div> 
 
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss"> 
 
     <p>Box 2</p> 
 
    </div> 
 
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss"> 
 
     <p>Box 3</p> 
 
    </div> 
 

 
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss"> 
 
     <p>Box 4</p> 
 
    </div> 
 
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss"> 
 
     <p>Box 5</p> 
 
    </div> 
 
    <div class="col-lg-3 col-md-3 col-sm-1"></div> 
 

 
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss"> 
 
     <p>Box 6</p> 
 
    </div> 
 

 
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss"> 
 
     <p>Box 7</p> 
 
    </div> 
 
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss"> 
 
     <p>Box 8</p> 
 
    </div> 
 
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss"> 
 
     <p>Box 9</p> 
 
    </div> 
 

 
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss"> 
 
     <p>Box 10</p> 
 
    </div> 
 
    <div class="col-lg-3 col-md-3 col-sm-1"></div> 
 
    <div class="col-xs-4 col-sm-2 newcss"> 
 
     <p>Box 11</p> 
 
    </div> 
 
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss"> 
 
     <p>Box 12</p> 
 
    </div> 
 

 
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss"> 
 
     <p>Box 13</p> 
 
    </div> 
 
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss"> 
 
     <p>Box 14</p> 
 
    </div> 
 
    <div class="col-xs-4 col-lg-1 col-sm-2 newcss"> 
 
     <p>Box 15</p> 
 
    </div> 
 
</div>

FIDDLE

助けてください。

Answer 1

ブートストラップは12列レイアウトに基づいているため、誤ってグリッドを使用しています。 あなたはこのようにやってコンテンツの左右にいくつかのパディングを追加することができます。

FIDDLE

.newcss { 
 
      background-color: red; 
 
      height: 120px; 
 
      width: 120px !important; 
 
      border-right: 5px solid white; 
 
      border-bottom: 5px solid white; 
 
      float: left; 
 
     }

<div class="row"> 
 
     <div class="col-lg-3 col-md-3 col-sm-1 col-xs-1"></div> 
 
     <div class="col-lg-6 col-md-6 col-sm-10 col-xs-10"> 
 
      <div class="newcss"> 
 
       <p>Box 1</p> 
 
      </div> 
 
      <div class="newcss"> 
 
       <p>Box 2</p> 
 
      </div> 
 
      <div class="newcss"> 
 
       <p>Box 3</p> 
 
      </div> 
 
      <div class="newcss"> 
 
       <p>Box 4</p> 
 
      </div> 
 
      <div class="newcss"> 
 
       <p>Box 5</p> 
 
      </div> 
 
      <div class="newcss"> 
 
       <p>Box 6</p> 
 
      </div> 
 
      <div class="newcss"> 
 
       <p>Box 7</p> 
 
      </div> 
 
      <div class="newcss"> 
 
       <p>Box 8</p> 
 
      </div> 
 
      <div class="newcss"> 
 
       <p>Box 9</p> 
 
      </div> 
 
      <div class="newcss"> 
 
       <p>Box 10</p> 
 
      </div> 
 
      <div class="newcss"> 
 
       <p>Box 11</p> 
 
      </div> 
 
      <div class="newcss"> 
 
       <p>Box 12</p> 
 
      </div> 
 
      <div class="newcss"> 
 
       <p>Box 13</p> 
 
      </div> 
 
      <div class="newcss"> 
 
       <p>Box 14</p> 
 
      </div> 
 
      <div class="newcss"> 
 
       <p>Box 15</p> 
 
      </div> 
 
     </div> 
 
     <div class="col-lg-3 col-md-3 col-sm-1 col-xs-1"></div> 
 
    </div>

Answer 2

グリッドシステムは必ずしもあなたのように使用することをお勧めしませんが（絶対的な高さと幅を持たせてください）、最初は応答性の高いグリッドを持つ点を否定します。すぐに問題を解決する簡単なソリューションです。いくつかの場所でコードの中間にこれらのビットのHTMLが詰まっています。

<div class="col-lg-3 col-md-3 col-sm-1"></div>

それは何のコンテンツが含まれていないし、周りのレイアウトを押す効果をしています。それらを取り除くと、それはあなたがしたいのはうまくいくようです。