Bootstrap 渲染在移动设备上变窄答案

【问题标题】：Bootstrap rendering narrow on mobileBootstrap 渲染在移动设备上变窄
【发布时间】：2014-07-31 15:16:36
【问题描述】：

我的页面在 chrome 上呈现得非常窄。在我编辑它之前它没有这样做，+1 按钮是我添加的唯一东西。然而，评论似乎并不能解决它。谁能指导我这里到底出了什么问题？我试过跟踪这个，但我完全不知所措。

【问题讨论】：

【解决方案1】：

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

您应该在移动设备上使用媒体查询来清除它。

例子：

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

我总是建议使用容器而不是自定义类。如果您在没有容器的情况下使用行属性，则说明您没有正确使用 Bootstrap。主体应更换为容器。然后为每个断点设置容器的宽度。解决了很多头痛问题，它适用于 Bootstrap。

【讨论】：

感谢您的快速课程。即使我在 css 中注释掉主体时也很奇怪，它似乎搞砸了，但也许它是缓存的副本。我将其设置为容器流体，开始稍微清理代码。现在我将尝试处理媒体查询，因此当最小宽度超过 900 左右时，我将添加填充。谢谢。这表明我需要重新开始我的 Treehouse CSS 课程 ;)
您也将其设置为body 元素。 Container-fluid 是全角。 Container 是根据断点设置的宽度。你需要重新开始你的 Bootstrap 课程:)
好吧，我实际上所做的是将它设置为身体。我像这样在正文上设置边距：@media screen and (min-width:900px){ body{margin:20px 160px 0px 160px;} }
老实说，我从来没有参加过引导课程，我也不打算最终参加。快速放置一些东西很方便，我稍后会在网站上工作。
我的意思是container 不需要其他任何地方的边距或填充。