css - Bootstrap を使用してモバイル デバイスで左マージンを空にする

Question

Bootstrap フレームワークを使用してサイトで作業していて、モバイル デバイスでウィンドウの右側に空白の余白があることに気付きました。特定はできませんが、これはタグに何らかの問題があると思います。

20px の余白がありますが、余白を削除すると、右側の .brand ロゴが部分的に画面からはみ出してしまいます。

ここで問題を確認できます。

ここでコードを提供できなくて申し訳ありません。問題を特定できないため、どの CSS を提供すればよいかさえわかりません。

Answer 1

「あなたの成功を確実にするためにオリジナルのスワイプファイルをダウンロードしてください」という見出しがあったブロック。テキスト、横に画像、キャプション「スワイプファイルのワンクリックダウンロード」があります

キャプションは実際には svg ファイルですが、一部のビューポートでは、ブートストラップ列に対して幅が広すぎて、グリッドが乱れていると思います。確かなことはわかりませんが、キャプションを一時的に削除して、何が起こるかを確認してみてください。

私が説明している動作は、ブラウザ ウィンドウが約 780px の場合に最も明白です ... 異なるものを見ている可能性は常にあります ;)

幸運を！

Answer 2

.navbar .brand は

margin-left:-20px;

そのため、動作は私には正常に思えます。メディアクエリを介して 0 に戻します

編集: 本文のパディングを削除:

@media (max-width: 767px)
body {
padding-right: 20px;
padding-left: 20px;
}

.navbar-fixed-top、.navbar-fixed-bottom、.navbar-static-top のマージン:

@media (max-width: 767px)
.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
margin-right: -20px;
margin-left: -20px;
}