Bootstrap form-horizo​​ntal溢出固定宽度的容器

Question

我意识到我正在以一种没有完全记录的方式使用Bootstrap的form-horizontal类，但我仍然不明白为什么这不起作用。

如果我使用div类创建form-horizontal并使用Bootstrap的网格布局类添加一些控件并使用Bootstrap的网格布局类指定宽度，则它可以正常工作。例如，这显示为我所期望的：

HTML

<div id="container">
  <div class="form-horizontal">
    <div class="form-group">
      <div class="col-sm-11">
        <input type="text" class="input-sm form-control" placeholder="Enter some text">
      </div>
      <div class="col-sm-1 text-right">
        <button class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-info-sign"></span></button>
      </div>
    </div>
  </div>
</div>

CSS

#container {
  padding:10px;
  background-color: gray;
}

结果是横跨页面整个宽度的形式，周围有10px的填充。理想的，除了我想在div中包含具有固定宽度的表单，这就是它出错的地方。

只需将width:400px;添加到CSS中的#container类，就会导致表单溢出div的宽度。

这是一个错误吗？如何解决这个问题，以便表单保留在容器中？

我在这里创建了一个示例小提琴：http://www.bootply.com/pP9gsJQipi。请注意，只需从#container类中删除宽度值，即可在需要时显示表单，尽管页面宽度为100％。

Answer 1

只需将width 100%添加到.form-group即可。 .form-group现在将根据100%的宽度调整#container。

<强> CSS

#container {
    padding:10px;
    background-color: gray;
    width: 400px;
}
.form-group {
    width:100%;
}

Bootply