twitter-bootstrap - 引导标题背景移动设备

Question

我有以下内容：

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

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

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

桌面视图：http: //i.imgur.com/T5Mqlqv.jpg

手机浏览：http: //i.imgur.com/fXvPdLz.jpg

谢谢

Answer 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;
}
}

祝你好运！