DEMO

Question

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

似乎无论我使用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

Answer 1

您的代码在bootstrap 3.2.0中正常运行

DEMO

Answer 2

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

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

Answer 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>

Bootstrap 3行太宽，给出水平滚动条

3 个答案:

DEMO