【Bootstrap】画面右側にできた謎の余白を消す方法

【プログラミング】


こんにちは、すずです(^o^)

Bootstrapを使ってレスポンシブ対応していたら、画面を縮小した際に、右側に「謎の余白」ができていました。


今回は、この謎の余白を消す方法について解説します。

早速ご覧ください!

【Bootstrap】画面右側にできた謎の余白を消す方法

結論、<body>の中身を囲い、overflow: hidden;をつける!

<!DOCTYPE html>
<html lang="ja">
  <head>(省略)</head>
  <body>
    <div class="wrap">
      <h1>sample</h1>
    </div>
  </body>
</html>

<body>の中を<div>で囲い、.wrapというクラスをつけました。

このクラス対して、overflow: hidden;をつけます。

.wrap {
    overflow: hidden;
}

これで「謎の余白」が消えました。

お困りの方は、ぜひ試してみてください!