【问题标题】：Bootstrap 3 row too wide giving horizontal scrollbarBootstrap 3 行太宽，给出水平滚动条
【发布时间】：2014-11-06 15:28:01
【问题描述】：

如何在没有水平滚动条的情况下使用表单控件创建一个简单的行？

似乎无论我用 bootstrap 3 做什么，任何应该 100% 的“流动”行实际上都超出了它的容器，它引入了一个水平滚动条。如何阻止它并使其适合其容器？

例子：

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <input type="text" required="" class="form-control" placeholder="Enter something" id="foo" name="foo">
        </div>
    </div>
</div>

jsfiddle：http://jsfiddle.net/qnb3q40g

【问题讨论】：

Jake745 指出这是我使用的引导程序 3.0.0 版本的问题。似乎已在 3.2.0 中修复

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您的代码在 bootstrap 3.2.0 中运行良好

DEMO

【讨论】：

有趣。我看到它适用于 bootply。但是它在我自己的 html 页面中有滚动条（显然比这更复杂），而且它似乎在 jsfiddle 上有问题。也许其他东西正在覆盖引导样式？
问题在于您在 jsfiddle 中使用的 3.0.0 版本。如果您在 Bootply bootply.com/4CZQvispG5 上将 BS 版本更改为 3.0.0，您会看到同样的问题
这短暂地让我发疯，因为我使用了适用于 3.0.0 的 Bootstrap 变量生成器。幸运的是，升级到 3.3.7 成功了。

【解决方案2】：

.container-fluid .row {
    margin-left: 0;
    margin-right: 0;
}

由于某种原因，在使用container-fluid bootstrap 时没有考虑到它在行上使用负边距。因此，通过添加上面的 css 将解决您的问题。

【讨论】：

那不是一门课。你错过了row:before 的 css 风格
真的很晚了，但我会推荐.container-fluid>.row { } 而不是.container-fluid .row { }，以防你在某个地方有另一个普通容器并想放一个普通的行。如果嵌套是一种不好的做法，请有人纠正我容器。

【解决方案3】：

演示 -http://jsfiddle.net/MeycD/537/

如果你愿意，你也可以这样做。

<div class="container">
  <div class="row">
     <div class="col-xs-5 col-lg-1">
      <input type="text" class="form-control input-normal" />
     </div>
  </div>
</div>

【讨论】：