html - 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。