11
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Bootstrapで右側に謎の余白ができた時の対処法

Last updated at Posted at 2019-06-05

#起きたこと

Bootstrap4を使ってレスポンシブ対応のWebページを作ったら、右側に謎の余白ができてしまった。
謎の余白.png
画像のように右端に隙間ができてしまい、無駄な横スクロールが発生する。
bodyのwidthやmarginをいじってみたが直らなかった。

#対処方法
bodyの中身をwrapしてoverflow:hidden;を設定したら直った。

##変更前HTML

sample.html
<!doctype html>
<html lang="ja">
  <head>
    ...(省略)...
  </head>
  <body>
    <h1>hello</h1>
    ...(省略)...
  </body>
</html>

##変更後HTML

sample.html
<!doctype html>
<html lang="ja">
  <head>
    ...(省略)...
  </head>
  <body>
    <div id="wrap">
      <h1>hello</h1>
      ...(省略)...
    </div>
  </body>
</html>

body直下にdivを追加して、id「wrap」を指定する。

##変更後CSS

layout.css
#wrap {
  overflow: hidden;
}

CSS側ではid「wrap」に対してoverflow: hidden;を指定した。

これで謎の余白は表示されなくなった。

#参考
http://bashalog.c-brains.jp/15/06/26-170500.php

11
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?