Bootstrap 网站在移动设备上没有响应

Question

更新：我已经更改了 % 并将 px 值设置为 max-width 但它仍然无法响应图像，移动菜单也无法正常工作.. (@987654321 @)

我正在使用 Bootstrap 开发一个网站，但由于某种原因它没有响应。我将viewport 设置为meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"

首先是Bootstrap.css，然后是theme.css。

Answer 1

我发现了几个问题：

1) 您的col-lg-1 和col-lg-10 类需要立即位于具有row 类的div 中，即在container 类中。也不要将它们包装在 modal-body 中 - 这会阻止响应式网格样式正常工作。

2) 您可能还应该在列中添加一些 col-md-** 和 col-sm-** 类，以便更好地控制中小尺寸的比例，而不仅仅是指定大尺寸。

3) 从container 中的类中移除所有固定宽度。

Answer 2

如果您想制作一个响应式网站，您应该停止使用固定宽度。例如，在您的网站上，您有一个名为 ".contacts" 的类和图像“Mazars Messenger”（在此处添加一个类并使用它代替我的代码中的 img）。尝试给它设置这些属性，看看会发生什么：

.contacts{
    max-width: 800px;
    width: 100%;
}
/*here you add your own class instead of img to affect only the image with that class*/
img{
    max-width: 800px;
    height: auto;
    width: 100%;
}
.container {
    max-width: 970px;
    width: 100%;
}

每篇文章下都有边框作为图像。您还需要修改这些代码，然后您的网站应该是响应式的。 您需要为整个网站执行此操作。祝你好运。

Answer 3

你强制一些宽度值以像素为单位，例如这里：

.contacts {
    width: 800px;
    display: block;
}

如果您希望它具有响应性，您需要设置百分比值，如下所示：

.contacts {
    max-width: 800px;
    width: 100%;
    display: block;
}