Twitter Bootstrap 在移动设备上没有响应

Question

我正在使用引导程序创建我的第一个网站，当我在桌面上工作时一切都很好。

当我将它传输到 FTP 并在我的手机上查看它时，我注意到响应能力全乱了。导航栏按钮看不到，我必须将页面向右移动才能看到它，而且那里还有一些没有意义的空白。

当我在桌面上查看网站并调整其大小时，一切都很好。

我试过了：

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

您可以在移动设备上查看该网站http://kyriakoskokkinos.royalwebhosting.net/index.html 并为您的问题查看问题。

任何帮助将不胜感激，因为这让我发疯。谢谢。

Answer 1

从div id="menu-section" 的CSS 中删除width: 400px;。或添加max-width: 400px;。也就是引入水平滚动的容器。

#menu-section {
  float: none;
  margin: 0 auto;
  padding: 20px;
  margin-top: 115px;
  background-color: #fff;
  height: 180px;
  text-align: center;
  border: 6px solid #EEE;
  max-width: 400px;
}