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

【Bootstrap】 colいっぱいに画像を表示する

完成例はこんなやつ

f:id:mooooooooooriiiiii:20170414142127p:plain

失敗例はこんなやつ f:id:mooooooooooriiiiii:20170414142639p:plain

こんなのができる原因は bootstrap が勝手に padding を設定してしまうのが原因。よって padding をゼロにすればいい。

<div class="col-sm-6 t" style="padding:0; background-color:red;">
  <img src="http://photo-pot.com/wp/wp-content/uploads/2012/10/renga3_02.jpg">
  <div class="caption text-center">
    <h4>たいとる</h4>
    <p>だいめい</p>
  </div>
</div>

ポイントは col と同じ場所に padding を設定すること。自動挿入される padding は col によってなされているからだ。