rails 独学して軽くにちゃんまとめつくる

【bootstrap】 thumbnail で間隔をあける

<div class="row">
  <div class="col-sm-6">
    <div class="thumbnail">
      <img src="https://www.textureking.com/content/img/stock/big/DSC_2685.JPG", class="img-responsive">
      <div class="caption text-center">
        <h3><%= link_to "click me!", class:"text-center" %></h3>
      </div>
    </div>      
  </div>  
  <div class="col-sm-6">
    <div class="thumbnail">
      <img src="https://www.textureking.com/content/img/stock/big/DSC_2685.JPG", class="img-responsive">
      <div class="caption text-center">
        <h3><%= link_to "click me!", class:"text-center" %></h3>
      </div>
    </div>      
  </div>  
</div>

こんな感じに <div class=“col-sm-6">~~</div\>の中に <div class="thumbnail">~~</div> をいれるとうまくいく。

f:id:mooooooooooriiiiii:20170413180010p:plain

ただ、こうした場合左右の隙間が見える。上は col-sm-12 で、下は col-sm-6 2つ分である。この方法は col と col の間には自動的に左右に隙間ができる性質を利用している。 CSS で直接 margin や padding で空白をつくろうとすると col の合計が 12 を超えてしまうため予期せぬレイアウト崩れとなってしまうので注意。

↓こんなかんじに

f:id:mooooooooooriiiiii:20170413173745p:plain