当浏览器在 Bootstrap 上缩小到移动大小时，右边距很大答案

【问题标题】：Large right margin when browser is shrunk to mobile size on Bootstrap当浏览器在 Bootstrap 上缩小到移动大小时，右边距很大
【发布时间】：2013-07-24 03:13:42
【问题描述】：

对于这个问题中缺少代码示例，我深表歉意，但我什至不知道该放什么。如果您访问此页面：

http://www.theplaybook.co

您会注意到，如果将浏览器窗口的大小调整为移动设备大小，页面右侧会出现一个大的白边。

我似乎无法弄清楚为什么会这样。有什么想法吗？

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

它来自这个填充：

 @media (max-width: 767px){
    body {
        padding-right: 20px;
        padding-left: 20px;
    }
 }

Line: 803 from this file > http://theplaybook.co/wp-content/themes/playbook/css/bootstrap-responsive.css?ver=3.5.2

回应您的评论：（试试这个）

 @media (max-width: 767px){
    .navbar {
       padding:0 20px;
    } 
 }

【讨论】：

这确实摆脱了 20px 的填充。谢谢：）
仍然是个问题。标题中的 Playbook 徽标现在从屏幕和菜单按钮中部分消失。此外，右侧仍有较大的白边。有什么想法吗？
查看我的编辑。看起来您只需要针对该媒体尺寸以不同方式处理导航栏填充。
你看到发生了什么？标志和菜单似乎不再被切断了？你期待别的吗？
是的，我这样做了，但右边的边距仍然存在。如果您将浏览器窗口缩小到移动设备大小，您仍然会在右侧看到一个白边。

【解决方案2】：

在 bootstrap-responsive.css 中，在较小的窗口尺寸下，主体在左侧和右侧获得 20 像素的填充。如果您根本不想这样做，请将其从您的版本中删除。它位于第 803 行，如下所示：

@media (max-width: 767px) {
  /*body { These are the lines you want to remove
    padding-right: 20px; 
    padding-left: 20px;
  }*/

如果您只想删除某个元素或类上的空白，请将这些边距添加到它：

 margin-left:-20px;
 margin-right:-20px;

摘自我在Twitter Bootstrap: white space on left and right side in smaller screen widths?的回答

【讨论】：