移动设备上的Bootstrap渲染很窄

Question

我的页面在chrome上渲染得非常狭窄。在我编辑之前它没有这样做，并且+1按钮是我添加的唯一内容。然而评论出来似乎没有解决它。任何人都可以引导我进入这里的错误吗？我试过追踪这个，但我完全失去了。

Site

extra Css

Answer 1

.main-body {
   padding: 20px 160px 0px 160px;
}

您应该使用媒体查询在移动设备上清除此内容。

示例：

@media screen and (max-width:screen-xs-max){
   .main-body{padding:0px;}
}

我总是建议使用容器而不是自定义类。如果您使用没有容器的行属性，则表示您没有正确使用Bootstrap。主体应更换为容器。然后为每个断点设置容器的宽度。解决了一大堆头痛问题，这对Bootstrap来说很合适。