[CSS] Bootstrapで並べた各要素に上マージンを適用したい

公開日:2018/10/22

やりたいこと

Bootstrapはレスポンシブに対応したレイアウトを簡単に実現できる素敵ライブラリーです
便利便利と思いつつ、悩みだったのが上マージンのつけ方
「.row」クラスにマージンをつけると、パソコン表示で横並びのときはよくても、モバイル表示で縦に並べたときに二つめ以降の要素がぴったりくっついてしまいます
「.col-xx-xx」クラスにマージンをつけたいところですが、要素の配置の仕方によってクラス名が変わってしまうので、一意にスタイルの指定ができません
という悩みの種ですが、最近これでいいのでは？という指定を思いつきました

サンプルコード

CSS

div[class^="col-"] {
    margin-top: 60px;
}

html

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3">
            <p>A</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            <p>B</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            <p>C</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            <p>D</p>
        </div>
    </div>
</div>

仕組み、解説、補足など

4×12で48パターンもある「.col-xx-xx」クラスですが、前方一致セレクタを使うことで、一文だけですべてのブレイクポイントに対応したスタイルの指定が可能です

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。