個人開発者をサポートするQ&Aツール

個人開発者・フリーランスエンジニア・リモートプログラマの
問題解決をサポートするサービスです

登録不要ですぐに質問を開始できます

Bootstrapで入れ子になったrowに対して親のパディングが有効にならないことがある

解決済 80pt 1件

お世話になります。

CSSフレームワークのBootstrap4を使って装飾しています。
たまに起こる現象なんですが、rowクラスを入れ子で指定する時、たまに親のパディング(空白)が有効にならないことがあります。

例えばこんなHTMLです
<html>
  <div id="parent" class='row p-5'>
    <div class='col-12'>
      <div id="child" class='row'>
        <h1>title</h1>
      </div>
    </div>
  </div>
</html>

親の#parentではパディング(p-5)を指定してるにも関わらず、そのパディングが子供の#childでは有効になりません

#childのクラスにパディングを指定すれば親のパディング同様にに表示することは可能なのですが、何かもやもやすると言うか・・・

もっとスマートな解決方法があればと思い質問致します。
Bootstrap v4.4.1
bootstrap html
ベストアンサーに選ばれた回答
#child要素にno-guttersクラスを指定するのはどうでしょうか?

<div id="parent" class='row p-5'>
  <div class='col-12'>
    <div id="child" class='row no-gutters'>
      <h1>title</h1>
    </div>
  </div>
</div>

回答の編集

この質問はすでに終了しているため変更できません


回答

この質問はすでに終了しているため、回答できません