Question

我正在制作我的第一个网站。这是关于pastebin的代码：

以下是一些绕过错误通知的代码。

<div class="container-fluid" id="intro">

（我很抱歉链接了pastebin，但它是很多代码。请理解在这里尝试格式化它是耗时的方式，而且无论如何，pastebin都会突出显示html元素）

在我的桌面引导程序上运行完美，并按原样调整大小。这是一个关于它如何正确调整大小的简短视频。

在常规视图模式（视频的第一部分）中，元素正确对齐。当我进入响应式设计模式时，元素也正确对齐。

但是当我将网站上传到我的服务器并在我的手机（三星Galaxy S7 Edge）上测试时，元素对齐不正确。

Android Firefox：

Android Chrome：

正如您所看到的，这些元素对齐就好像它们处于手机浏览器桌面视图模式一样（不是这样）。

我在别人的手机上试过这个，发生了同样的事情。

这是一个bootstrap错误吗？我的代码错了吗？

Answer 1

您应该在代码中包含viewport元素，

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 2

必须使用col-lg-＃而不是sm或xs。我想手机上的显示实际上与Mozilla网络工具的分辨率不同。