Bootstrapで親のパディングが有効にならない子への対策

Bootstrap

Bootstrapを使ってると度々遭遇する問題として、親のパディングが有効にならないことがあります

例えばこんなケース

<div class="container">
    <p>
        親のパディング内
    </p>
    <div class="row">
        子のパディング内
    </div>
</div>

「子のパディング内」も親のcontainer内に入ってるのに、左のパディングが有効になってません

rowのマイナスマージン（-15px）が効いてしまい、左右の文字が揃ってません

no-gutters

こんな時に便利なのがBootstrapのno-guttersです

<div class="container">
    <p>
        親のパディング内
    </p>
    <div class="row no-gutters">
        子のパディング内
    </div>
</div>

このようにno-guttersクラスを追加することで、rowのマイナスパディングがなくなり左右のアライメントが揃います