css - Bootstrap form-水平溢出定宽容器

Question

我意识到我使用 Bootstrap 的 form-horizo​​ntal 类的方式没有完全记录，但我仍然不明白为什么这不起作用。

如果我使用 form-horizo​​ntal 类创建一个 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>

CSS

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

结果是一个横跨整个页面宽度的表单，四周有 10 像素的填充。理想情况下，除了我想将表单包含在具有固定宽度的 div 中，这就是它出错的地方。

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

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

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

Answer 1

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

CSS

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

Bootply