嵌套div导致bootstrap3中的内联元素？

Question

我正在使用Bootstrap 3.1.1。我发现封闭<div class="input-group col-lg-3">会导致堆叠输入框，如下所示，同时执行嵌套

<div class-"col-lg-3">
    <div class="input-group>
        ....
    </div>
</div>

结果为inline-elements。我想知道这背后是否有任何逻辑推理？

<div class="container">
    <div class="col-lg-3">
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="text" class="form-control" placeholder="Enter price">
        </div>
    </div>
    <div class="col-lg-3">
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="text" class="form-control" placeholder="Enter price">
            <span class="input-group-addon">per item</span>
        </div>
    </div>
    <div class="col-lg-3">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Enter price">
            <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">Search</button>
            </span>
        </div>
    </div>
</div>

<div class="container">
    <div class="input-group col-lg-3">
        <span class="input-group-addon">$</span>
        <input type="text" class="form-control" placeholder="Enter price">
    </div>
    <div class="input-group col-lg-3">
        <span class="input-group-addon">$</span>
        <input type="text" class="form-control" placeholder="Enter price">
        <span class="input-group-addon">per item</span>
    </div>
    <div class="input-group col-lg-3">
        <input type="text" class="form-control" placeholder="Enter price">
        <span class="input-group-btn">
            <button class="btn btn-primary" type="submit">Search</button>
        </span>
    </div>
</div>

Answer 1

原因是input-group [class * = col-]的默认css删除了float和padding。

以下是规则：

.input-group[class*=col-] {
  float: none;
  padding-left: 0;
  padding-right: 0;
}

这将覆盖正常的列css，它依赖于float左侧，因此列并排放置并且15px的填充以创建列排水沟。

不具备此效果，您可以覆盖或删除此规则，将输入组包装在单独的元素中（如您所做）或使用表单/表单组/输入组的组合之一文档。

Answer 2

从Bootstrap文档：

  

Input groups

     

不要与其他组件混合

     

不要将表单组或网格列类直接与输入组混合使用。而是将输入组嵌套在表单组或与网格相关的元素中。

换句话说，<div class="input-group col-lg-3">是错误的。相反，你应该写：

<div class="col-lg-3">
    <div class="input-group">