Css 引导窗体水平溢出固定宽度容器

我意识到我在使用Bootstrap的

form horizontal

类，但我仍然不明白这为什么不起作用

如果我使用

form horizontal

类创建一个

div

，并使用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>

结果是整个页面的宽度都是表单，周围有10px的填充。理想情况下，除了我想将表单包含在具有固定宽度的

div

中，这就是它出错的地方

只需添加

宽度：400px#container

类的code>会导致表单溢出

div

的宽度

这是虫子吗？如何修复此问题，使窗体保持在其容器中

---

我在这里创建了一个小提琴示例：。请注意，只需从

#容器

类中删除宽度值，表单就会按需要显示，尽管页面宽度为100%。

只需在

表单组

中添加

宽度

。

.form组

现在将根据

#容器的宽度调整
100%

CSS

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

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