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のマイナスパディングがなくなり左右のアライメントが揃います

エンジニアの年収を上げる方法

フリーランスエンジニアで年収を大幅アップしませんか?
実際に僕は会社員からフリーランスエンジニアになって年収が87万円アップしました

今なら相談(ヒアリング)するだけで3,000円分のamazonギフト券がもらえます!
初めての案件契約で最大10万円分の準備金がもらえます
非公開の高単価案件(100万円超え)が多数あります

詳しくはこちら