html - 使用引导程序在移动版本中填充

Question

我最近在使用 bootstrap 时遇到了网站页脚问题

因此，我希望有一个统一的颜色背景

我知道 body 是由于 10px 的填充造成的，但是将其删除并将其应用于两个主要 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;
    }
}