col-md- *

Question

を使用してブートストラップ3.0の5行の画像を1行に追加する方法boot -rap 3.0でcol-md- *を使用して5枚の画像を隙間なく追加します。ブートストラップには12個のグリッドがあります。しかし、私はわずか5画像を入れます。どうやってするの.. ？

Answer 1

ブートストラップのcol-md- *であなた自身の質問に答えるだけで、間違いなく実行できます。 12の列があり、5つのイメージを表示するには2つの列が残っています。

6枚の画像を入れても構いませんが、col-md-2のCSSルールを20％の幅に変更するか（自分では推奨しません）、独自のCSSルールを作成してくださいfloat：left、width：20％（私はこれをお勧めします）が、画面の幅に応じて他のCSSルールを適用します（必要に応じて）。

Answer 2

まずはごめんなさい。投稿リンクやチュートリアルが許可されていないことを知りませんでした。 私はあなたの問題をちょっと解決しました。 私は5列のグリッドを作成しました。 800ピクセルで100％の幅に崩壊します（簡単に変更できます）。

.grid-container{ 
 
    width: 100%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    box-sizing: border-box; 
 
} 
 
.grid-row { 
 
    margin-left: inherit; 
 
    margin-right: inherit; 
 
} 
 
/*-- our cleafix hack -- */ 
 
.grid-row:before, 
 
.grid-row:after { 
 
    content:""; 
 
    display: table ; 
 
    clear:both; 
 
} 
 

 

 
.col-1{ width: 20%; 
 
    float: left; 
 
    padding: 5px; 
 
} 
 
.col-offset-1 { 
 
    margin-left: 20%; 
 
    float: left; 
 
    padding: 5px; 
 

 
} 
 
.col-offset-2 { 
 
    margin-left: 40%; 
 
    float: left; 
 
    padding: 5px; 
 
} 
 
.col-offset-3 { 
 
    margin-left: 60%; 
 
    float: left; 
 
    padding: 5px; 
 
} 
 
.col-offset-4 { 
 
    margin-left: 80%; 
 
    float: left; 
 
    padding: 5px; 
 
} 
 

 

 
@media all and (max-width:800px){ 
 
    .col-1 { width: 80%; 
 
    margin-left: 10%; 
 
    margin-right: auto; 
 
     padding: 15px; 
 
    } 
 
    .grid-container { 
 
     width: 100%; 
 
    } 
 
    img { 
 
     display: block; 
 
     margin:0 auto; 
 
    } 
 

 
} 
 
img { 
 
    display: block; 
 
    margin:0 auto; 
 
}

<div class="grid-container"> 
 
    <div class="grid-row"> 
 
     <div class="col-offset-2 col-1"><img src="http://placehold.it/600x150" alt="" class="img-responsive"></div> 
 
     <div class="col-1"><img src="http://placehold.it/600x150" alt="" class="img-responsive"></div> 
 

 
    </div> 
 
</div>

それはあなたが探していたものだ場合、私は本当に知りません。