Question

所以，如果有人可以提供帮助，我会很高兴，但我只是在完成我的投资组合网站www.tylerRdesigns.com，出于某种原因，当你在浏览器上时，右边还有20到30个像素的空间。因此，当您使用手机或计算机时，它会产生恼人的滚动体验。

我使用bootstrap来创建我的导航栏，但其余部分是从头开始编码的，我的所有宽度都设置为100％所以我很困惑为什么会有额外的空间。

如果有人可以查看我的网站并查看它的实时代码，我会非常感激。我最好的猜测是它在我的导航栏中，但我无法弄清楚它为什么超出100％的宽度？

谢谢。

Answer 1

有些事情没有定义：

在您的控制台中显示它们

Uncaught ReferenceError: jQuery is not defined
(index):103GET http://www.tylerrdesigns.com/img/close.png 404 (Not Found)
(index):103GET http://www.tylerrdesigns.com/img/loading.gif 404 (Not Found)
(index):103GET http://www.tylerrdesigns.com/img/prev.png 404 (Not Found)
(index):103GET http://www.tylerrdesigns.com/img/next.png 404 (Not Found)
(index):1 GET http://www.tylerrdesigns.com/js/lightbox.min.map 404 (Not Found)
jquery-1.11.2.min.js:3 GET http://www.tylerrdesigns.com/img/prev.png 404 (Not Found)jquery-1.11.2.min.js:3 a.getComputedStyle.Jbjquery-1.11.2.min.js:3 m.extend.cssjquery-1.11.2.min.js:3 (anonymous function)jquery-1.11.2.min.js:3 m.accessjquery-1.11.2.min.js:3 m.fn.extend.csslightbox.min.js:9 b.buildlightbox.min.js:9 b.initlightbox.min.js:9 blightbox.min.js:9 (anonymous function)jquery-1.11.2.min.js:2 m.Callbacks.jjquery-1.11.2.min.js:2 m.Callbacks.k.fireWithjquery-1.11.2.min.js:2 m.extend.readyjquery-1.11.2.min.js:2 J
jquery-1.11.2.min.js:3 GET http://www.tylerrdesigns.com/img/next.png 404 (Not Found)
jquery-1.11.2.min.js:3 GET http://www.tylerrdesigns.com/img/loading.gif 404 (Not Found)
jquery-1.11.2.min.js:3 GET http://www.tylerrdesigns.com/img/close.png 404 (Not Found)

Answer 2

你的div后面有30像素的填充，ID为＆＃34; resumeCircle＆＃34;。

您可以使用chrome中的firebug或Web开发人员工具来调试代码。这就是我所做的一切。

Answer 3

这可以使用Twitter Bootstrap来解决。它利用网格布局将页面分成12列。我正在查看图片库，每行5张图片。这就是你的问题所在。

应分解如下

  Margin col-md-2 col-md-2 col-md-2 col-md-2 col-md-2 Margin

每张图片占用2列空间。 2 x 5 = 10.这占12列中的10列。我们如何解释其他2列？使用col-md-1-offset类

您的代码看起来像是

<div class="container">
  <div class="row">
    <div class="col-md-2 col-md-offset-1">
      Images
    </div>
    <div class="col-md-2">
      Images
    </div>
    <div class="col-md-2">
      Images
    </div>
    <div class="col-md-2">
      Images
    </div>
    <div class="col-md-2">
      Images
    </div>
  </div>
</div>

Answer 4

您只需从row，About Grid和About Background部分结尾删除部分About me，或在container-fluid上添加row。试试吧

Answer 5

只需申请

overflow-y:hidden;

到＃video-container如果你想快速修复。

发生这种情况是因为.header-unit类的高度为850px，＃video-container中的图片大于此值。

Answer 6

您正在使用引导程序。在元素上使用row类时，必须将其包装在.container元素中。

请参阅the doc。

我的网站宽度比我需要的宽？

6 个答案: