移动布局无渲染宽度：100％

Question

我第一次尝试在webapp上使用bootstrap - 这是我在iPhone上呈现的方式。

为什么一切都显示在100％宽度下？

示例：页面顶部称为暗容器，嵌入了图像的包装器，这是css

#darkcontainer {
 height:200px;
 width:100%;
 border: none;
 background-color:whitesmoke;
 text-align:center;
}

我的猜测是下面的图像（滑块的一部分）将所有内容都推到100％以下，因为它要大得多？该滑块具有以下css

#slides {
   height:500px;
   width:1065px;
   margin: 0 auto;
      ul.pagination {
          width:100%;
          text-align: center;
            li {
            display:inline-block;
            }
      }
}

        .slides_container {
            width:1065px;
            height:500px;


        }
        .slides_container div {
            width:1065px;
            height:500px;
            display:block;


        }

邮件列表看起来会有所不同，因为在它变成白色之前有更多的背景颜色，但那只是......以儿童为中心的100％宽度包装

#autoheightwrap {
   height:auto;
   width:100%;
   background-color:whitesmoke;
}
#mailform {
   height:100%;
   width:600px;
   margin: 0 auto;
   background-color: whitesmoke;
        padding: 6px 12px;

 ...

您可以在浏览器here中查看该网站。

为什么会以这种方式呈现它？

Answer 1

#slides的宽度设置为1065px。这是破坏您网站的罪魁祸首。您必须使用针对移动设备的媒体查询来重新设置它。

对于更具响应性的友好幻灯片，我可以建议cycle2吗？