为什么 Bootstrap 的 CSS 会切断我页面上的内容？

Question

我正在使用 Bootstrap 构建网页。该页面在台式机和笔记本电脑上的外观应如此。但是，在手机上查看时，页面内容的下半部分被截断。这仅在手机或宽度调整为小于 991 像素的窗口上发生。

我尝试筛选包含的 Bootstrap CSS 文件，但找不到任何样式规则来指示我所描述的任何行为。

我附上了两个屏幕截图：图 1 是预期的行为——内容以嵌入的联系表单结尾。图 2 是令人费解的行为——页面刚好在定价表的中间结束。

该网站是grillmasters.info

[图。 1]http://i.stack.imgur.com/uH7MB.png
[图。 2]http://i.stack.imgur.com/h2190.png

Answer 1

如果没有看到更多信息（例如，尝试发布仍然显示此错误的最少量 HTML），很难给出解决方案。但这里有三件可能的事情要检查：

• 不匹配（不完整）DOM 如果你有一个开放元素（例如<div>）而没有它的关闭元素（</div>），HTML 会以神秘且通常无法重现的方式表现。这通常包括在不匹配之后对所有元素进行错误样式设置。
• 字符错误或文件不完整 如果您通过 FTP 上传并且连接中断，您可能只查看文件的一个片段。尝试删除并重新上传。如果浏览器或 FTP 客户端遇到一个使其停止读取文件的字符，也会发生同样的情况——两者都可能导致 DOM 不匹配。
• 不必要的body CSS 确保您没有在任何地方（或任何其他全局、包含所有元素）指定 height 或 body 或 html。页面应该自然流动，无需您指定height: 100%.

[编辑]我查看了您的网站（重定向到 http://www.supsean.com/grillemasters/，以防其他人有兴趣在框架之外进行调试）。当您将屏幕调整到如此小的尺寸时，请查看页面顶部；有相当普遍的 CSS 问题，很可能是由 position: fixed 或 absolutes 引起的，而它们不需要。

尝试解决这个问题，我怀疑你也会偶然发现这个问题的解决方案。