Question

更新：我已更改%并将px值设为max-width，但它仍然没有响应图像，移动菜单也没有工作..（link to website）

我正在使用Bootstrap工作，但出于某种原因，它没有响应。我将viewport设置为meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"

首先是

Bootstrap.css，然后是theme.css。

Answer 1

如果您想制作自适应网站，则应固定宽度 停止。例如，在您的网站上，您有一个名为＆＃34; .contacts＆＃34; 的图片和图片＆＃34; Mazars Messenger＆＃34;（在这里添加一个类并使用它而不是我的代码中的img）。尝试将这些属性设置为它，看看会发生什么：

＆＃13;

.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%;
}

＆＃13;

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

Answer 2

我看到了几个问题：

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

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

3）从container内的班级中取出所有固定宽度。

Answer 3

您正在强制以像素为单位的某些宽度值，例如：

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

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

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

Bootstrap网站没有对移动设备做出响应

3 个答案: