[CSS] Bootstrapのオフセット(col-*-offset-*)で要素がずれるときの対処法
指定していないはずのブレイクポイントでオフセットが働いてしまう
- カラムに余白をつけるために使うオフセット(col-xs-offset-*/col-sm-offset-*/col-md-offset-* など)
- 3つの要素をmdでは3カラムで並べて、smでは2カラム、改行して真ん中に1カラムという感じで配置したいときに↓こんな書き方をすると、md表示でもオフセットがついて要素がずれてしまいます
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4"></div>
<div class="col-sm-6 col-md-4"></div>
<div class="col-sm-offset-3 col-sm-6 col-md-4"></div>
</div>
</div>
大きいブレイクポイントのオフセットをリセットする
- sm用に指定したオフセットは、そのサイズより大きいブレイクポイントで解除する必要があるようです
- 以下のように書けば問題ありません。わざわざ0をオフセットするというのは何ともむずむずした感じですが
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4"></div>
<div class="col-sm-6 col-md-4"></div>
<div class="col-sm-offset-3 col-sm-6 col-md-offset-0 col-md-4"></div>
</div>
</div>
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。