bootstrapを使ったモバイル画面で幅が100%にならずに「ぐらぐら」する件

bootstrapを使ってコーディングしたページをモバイルで表示したとき、横幅がきっかり100%にならずに「ぐらぐら」する場合があります。

↓ちょっとわかりにくいですが、こういうやつです。

スワイプするとぐらぐるするWebページのスクリーンショット

SCDB JAPANでも以前から発生していることを認識はしていながら、これまで放置しておりましたが、 ようやく対応が完了しましたので対応方法を共有します。

ぐらぐらの原因は何だったのか？

グリッドシステムのrowにはマイナスのmargin（ネガティブマージン）が設定されており、これが要素を左右に引っ張っているために親要素を突き破っていたことが原因でした。

修正前の状況

横幅320pxの画面で表示した場合の状況なのですが、親要素が307.2pxなのに対して、子要素で左右-15ずつのmarginが取られたことによりコンテンツが307.2px+15px+15px=337.2pxとなり、画面サイズの320pxをオーバーしてしまっています。

【親要素】

【子要素（rowが設定されている要素）】

修正内容

親要素のpaddingに左右それぞれ+15pxを取り、子要素のネガティブマージンと相殺しました。

.parent-element{
  padding-left: 15px;
  padding-right: 15px;
}

【親要素】 左右にpaddingを取ったため、コンテンツの幅が同じだけ狭くなりました。

【子要素（rowが設定されている要素）】 ネガティブマージン自体はそのままですが、親要素が狭くなったことで子要素も同じだけ狭くなっており、320px以内に収まるようになりました。