スポンサーリンク

BootstrapのRowをStripeにするには?

CSSを使います

BootstrapのGridシステムは便利ですが、tableの様にstripe属性はありません。

じゃあどおすんの?ってことでCSSを使います。

<div class="row my-row">…</div>
<div class="row my-row">…</div>
<div class="row my-row">…</div>

<style>
    .my-row:nth-child(odd) {
        background-color: #ffffff;
    }

    .my-row:nth-child(even) {
        background-color: #f8f9fa;
    }
</style>

引数の「odd」と「even」は予約語なので、変更してはいけません。
便利ですね。
でもこれSCSSではなく標準CSSだったりしますので、SCSS未対応ブラウザでも動くと思います。