Bootstrap 3 容器左移答案

【问题标题】：Bootstrap 3 container shifting leftBootstrap 3 容器左移
【发布时间】：2016-04-05 07:48:30
【问题描述】：

在 Bootstrap 3.x 中，我在一个容器中有两个页面：

<body>
   <div class="container">
      ...
      ...
   </div>
</body>

当我从主页转到关于页面时，我看到由于出现滚动条而导致内容向左移动。

如何防止这种恼人的眼睛行为？我必须始终显示滚动条（还有什么时候不需要？）

【问题讨论】：

【解决方案1】：

您应该使用浏览器的检查器工具检查您的元素（右键单击并选择检查）。将鼠标悬停在检查器代码中的元素上，查看哪些元素溢出并导致滚动条出现。单击该元素将向您显示它使用的 CSS 样式，您可以通过在代码中执行之前修改“实时页面”来修复溢出。好工具！

如果您希望收到更具体的答案，我们将需要更多的 HTML 代码。您是否已经添加了任何元素，例如.navbar 之类的？

其中一个已知问题是，如果将.navbar 放在像.col-xs-8 这样的列中，则会溢出，因为Bootstrap 导航栏内的.container 设置为填充整个页面宽度。如果您的页面中有导航栏，请更改它的 CSS，如下所示，看看它是否得到修复：

.navbar-default .container { width: 100% !important; }

（如果您发现 !important 会影响某些内容，请删除它。如果不是真的需要，最好避免保留这些重要内容。

【讨论】：