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

Question

我正在使用 bootstrap 制作我的第一个网站，当我在我的桌面上工作时，一切都很好。

当我将它传输到 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;
}