Question

我无法找到问题的解决方案。我正在使用此模板中的部分代码 - http://blackrockdigital.github.io/startbootstrap-full-width-pics/其中是标题中带有全宽的图像。

以下是我的文件的屏幕截图 - http://pasteboard.co/1E4k2zxf.png 你可以在右侧看到有白色的间隙。您可以从左向右向下滚动（看起来宽度超过100％）

在HTML中我正在使用这个类：

<body>
 <div class="image-bg"></div>
.............

它在体内，它不在任何其他标签内。我正在使用clear bootstrap 3.3.6和custom.css这些行：

.image-bg {
  background: url('http://lorempixel.com/g/1920/500') no-repeat center center scroll;
  height: 384px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

但它仍然不起作用。它会在图像的右侧创建边距或填充，但不应该。除了bootstrap和custom.css之外，没有任何其他CSS文件。

谢谢你的想法：）

Answer 1

这不是图像容器的问题，它是顶部的导航栏导致额外的边距。见截图：

快速解决方法是添加

body {
   overflow-x: hidden 
}

或者找出导致导航栏上额外宽度的原因

Answer 2

只需要在css下面使用body margin来解决问题

body {
    margin: 0;
}

Answer 3

只需从.image-bg-fluid-height移除负边距并添加background-size: cover即可。

希望它有所帮助。

Bootstrap全宽图像标题创建空白区间隙

3 个答案: