Html 背景图像超出行（<；768像素

我正试图用Bootstrap3来解释为什么我们的联系人页面上的这一行出现了图片。当我在google chrome上最小化屏幕时，它看起来不错，但当我在iPhone上查看页面时，它看起来是这样的：

（我可以看到堆栈图片上传功能不起作用。因此我正在链接到域上的图片--imgbb）：

我有一个想法，可能是下面的班级把事情搞砸了。我必须为我使用的一些核心类使用前缀，所以我不会影响整个站点。在本例中，当屏幕为

<768px

时，我希望在页面上留一个20px的边距。有人建议我将所有代码包装成一行，因为容器是在后端调用的，并且有自己的风格

/* Make a 20px margin on mobile devices */
@media (max-width: 768px) {
        .mk .row {
            margin-left: 20px !important;
            margin-right: 20px !important;
        }
}

我希望横幅上的背景图片在手机上全宽显示。有人知道我如何解决这个问题吗？我几乎被卡住了

我试图找出与问题无关的代码

.mk.row[class*=“col-”]{
右侧填充：5px；
左侧填充：5px；
}
.mk页头{
背景：线性梯度（rgba（0,0,0.7），rgba（0,0,0.7）），url(https://vou.dk/Cms/333780ed-bd2b-4513-9186-af155e172a57.jpg)
不重复；
位置：相对位置；
背景尺寸：封面；
}
.mk.row{
左边距：10px；
右边距：10px；
}
.页面标题{
填充顶部：170px；
填充底部：174px；
}
.页面标题{
字体大小：46px；
线高：1；
颜色：#fff；
字号：600；
文本对齐：居中；
}
.card节{
位置：相对位置；
底部：140px；
边缘底部：-80px；
}
.卡块{
填充：20px 80px 50px 80px；
盒影：20px 20px 50px灰色；
背景色：#fff；
}
.章节标题{
边缘底部：40px；
}
.img响应mk{
宽度：35%！重要；
}
@介质（最大宽度：768px）{
.img响应mk{
宽度：100%！重要；
}
.卡座{
填充：10px；
左边距：10px；
右边距：10px；
}
.页面标题{
字体大小：30px；
}
.mk标题{
字体大小：24px；
}
氢{
字号：1.5em；
}
h3{
字号：1em；
文本对齐：居中；
}
/*在移动设备上获得20像素的利润*/
.mk.row{
左边距：20px！重要；
右边距：20px！重要；
}
/*在一行中写入核心填充*/
.联系人图标.行{
左边距：0px！重要；
右边距：0px！重要；
}
}

康塔克特沃雷斯支援队
你是谁？
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔出于谨慎，还必须为动物的劳动负责

该问题是由.container流体和#chrome元素引起的。容器流体应用填充，但使用填充将其取消：0；在铬上。你必须用不同的方法来解决这个问题

解决方案1：我建议将容器流体类移动到#front元素。 但这取决于你。但是，需要容器流体来防止图像溢出，因为行具有负边距（这就是它们溢出的原因），通常最好将它们包装在容器中以防止溢出

解决方案2：从

然后将除.mk页眉以外的所有其他行包装到.container中

建议：在测试和搜索此类问题时，请使用浏览器中的开发工具。这会让你的生活变得更轻松。Dev工具非常棒，是一个非常强大的工具。一旦你掌握了窍门，你就会发现没有它是很难做到的：）

---

希望这有帮助

尝试将行边距替换为padding，并确保框大小设置为padding box，如下所示：

替换此项：

/* Make a 20px margin on mobile devices */
@media (max-width: 768px) {
    .mk .row {
        margin-left: 20px !important;
        margin-right: 20px !important;
    }
}

为此：

/* Make a 20px margin on mobile devices */
@media (max-width: 768px) {
    .mk .row {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box;
    }
}

@media (max-width: 768px) {
    .mk.row {
        margin-left: 20px !important;
        margin-right: 20px !important;
    }
}

通过将框大小设置为边框框，您告诉它不要通过添加填充来增加其大小。 还有，使用！重要的是错误的做法，除非您正在覆盖内联样式或讨厌的选择器，否则不建议您这样做。

此CSS规则：

@media (max-width: 768px) {
    .mk .row {
        margin-left: 20px !important;
        margin-right: 20px !important;
    }
}

应用于具有

行

类的元素，该元素是具有

mk

类的元素的后代。因此，它不适用于此

div

：

<div class="mk row" style="background-color: white;">

---

请注意，

.mk

和

.row

之间没有空格，这意味着规则将应用于同时包含

mk

和

row

类的元素。

感谢您的建议。我只是在我的问题中给出的链接中尝试了你的代码，但它不起作用