ブートストラップガター幅とグリッドセンタリング

私はコンテナをブートストラップに集中し、ガター幅を減らす方法を探していましたが、解決策を見つけることができませんでした。私は画像（2行、3列）のグリッドを持っているので、列間の溝の幅を減らし、2列の間に水平溝を追加できるようにしたい。私はグリッドを中心にしたいと思っています。ブートストラップガター幅とグリッドセンタリング

<body> 
<div class="container" width="400px" > 
<div class='row'> 
<div class="col-md-2"> 
<img class='img-responsive' class="thumbnail"  src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg"/ width= '100px'> 
</div> 
<div class="col-md-2"> 
<img width= '100px' class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" /> 
</div> 
<div class="col-md-2"> 
<img width= '100px' class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" /> 
</div> 
</div> 
<div class='row'> 
<div class="col-md-2"> 
<img width= '100px' class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" />  
</div> 
<div class="col-md-2"> 
<img width= '100px' class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" /> 
</div> 
<div class="col-md-2"> 
<img width= '100px' class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" /> 
</div> 
</div> 
</div>

出典

2016-07-12 S Walsh

カスタムコードを書きましたか？ブートストラップはフレームワークです。それを構築してください –

画像の幅を設定する 'img-responsive'を使って100pxを打ち消す – ZimSystem

2つのクラスタグを使用しています。また、固定幅を使用している場合は' img-responsive' 100ピクセルですか？ 'width = '100px' class = 'img-responsive' class =" thumbnail "' – vanburen

行パディングが必要な場所で使用するためのシンプルなクラスを作成することをお勧めします。

.row-padded 
{ 
    margin-top:20px; 
}

列間のスペースを削除するのと同じです。

.column-nospace 
{ 
    padding: 0 !important; 
    margin: 0 !important; 
}

可能性がありますが、箱から出して意図したとおりに機能するためにブートストラップを必要とするとき倍になるので、私はコアブートストラップファイルを編集の上にこれらをお勧めします。

ここはあなたが望むものを示すフィドルです（私は思う）。 https://jsfiddle.net/Gt25L/583/

出典

2016-07-12 14:30:20 CrazyPaste

ブートストラップには、各列に定義できるオフセットがあります。

あなたがCOL-MD-6の各行をラップし、それ3

ブートストラップ幅の割合と、それらのグリッドを行うのオフセットを与えることができます。したがって、列が6ワイドの場合、幅は50％になり、各辺で25％のマージンが列を中央に配置します。

<div class='row'> 
    <div class="col-md-6 col-md-offset-3"> 
     <div class="col-md-2"> 
      <img class='img-responsive' class="thumbnail" 
       src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" width='100px'> 
     </div> 
     <div class="col-md-2"> 
      <img width='100px' class='img-responsive' class="thumbnail" 
       src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg"/> 
     </div> 
     <div class="col-md-2"> 
      <img width='100px' class='img-responsive' class="thumbnail" 
       src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg"/> 
     </div> 
    </div> 
</div>

出典

2016-07-12 14:33:12 Tom

答えて

関連する問題