html - ブートストラップを使用したモバイル バージョンのパディング

Question

最近、ブートストラップを使用している Web サイトのフッターで問題が発生しました

したがって、均一な色の背景が必要です

bodyは10pxのパディングによるものだと理解していますが、それを外してメインの2つのdivに適用するとスマホ版で問題が発生します。

基本コードはこれ

<div id="content">
    ...
</ div>
<footer>
    ... 
</ footer>

HTML コードに div を追加することなく、この問題を解決したいと考えています。

すべてに前もって感謝します

Answer 1

負のマージンで作業し、パディングで補う必要があります。試す：

footer { 
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
}

編集：明確にするために。次のように、767px 未満の画面を対象とするメディアクエリにこれを配置する必要があります。

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