引导标题背景移动设备答案

【问题标题】：Bootstrap Header Background Mobile Devices引导标题背景移动设备
【发布时间】：2013-03-26 16:22:16
【问题描述】：

我有以下：

<header class="container-fluid" id="header">...</header>

这有一个背景图像应用到它并跨越桌面视图上屏幕的整个宽度。但是，当您将窗口大小调整为移动设备大小时，两侧会有额外的白色填充，这意味着背景没有覆盖全屏，实际上与

中的内容相同

实现这一目标的最佳方法是什么？笔记。背景仅适用于页面的标题部分而不是整个页面。

谢谢

【问题讨论】：

【解决方案1】：

在 767px 及以下的视点，Bootstrap 在 body 的左右添加 20px 的 padding，即

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

因此，如果您希望标题背景扩展全宽，您需要覆盖它。

类似下面的东西应该可以解决问题。

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

祝你好运！

【讨论】：