Bootstrap輸入組網格對齊在Chrome上不起作用

Question

我正在使用Bootstrap 3並試圖在同一表格網格上使用具有非分組輸入的輸入組。它在IE和FF上運行良好，但在Chrome中，網格對齊丟失。是否存在Chrome錯誤或者我做錯了什麼？

<form> 

    <div class="form-group"><div class="col-xs-4"> 
    <label class="control-label" for="input1">Input1</label> 
    <input type="text" class="form-control" id="input1" name="input1"> 
    </div></div> 

    <div class="form-group"><div class="col-xs-4"> 
    <label class="control-label" for="input2">Input2</label> 
    <div class="input-group"> 
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
    <input type="text" class="form-control" id="input2" name="input2"> 
    </div> 
    </div></div> 

    <div class="form-group"><div class="col-xs-4"> 
    <label class="control-label" for="input3">Input3</label> 
    <input type="text" class="form-control" id="input3" name="input3"> 
    </div></div> 

    <div class="form-group"><div class="col-xs-4"> 
    <label class="control-label" for="input4">Input4</label> 
    <input type="text" class="form-control" id="input4" name="input4"> 
    </div></div> 

    <div class="form-group"><div class="col-xs-4"> 
    <label class="control-label" for="input5">Input5</label> 
    <div class="input-group"> 
    <span class="input-group-addon">Go!</span> 
    <input type="text" class="form-control" id="input5" name="input5"> 
    </div> 
    </div></div> 

    <div class="form-group"><div class="col-xs-4"> 
    <label class="control-label" for="input6">Input6</label> 
    <input type="text" class="form-control" id="input6" name="input6"> 
    </div></div> 

    <div class="form-group"><div class="col-xs-4"> 
    <label class="control-label" for="input7">Input7</label> 
    <input type="text" class="form-control" id="input7" name="input7"> 
    </div></div> 

    <div class="form-group"><div class="col-xs-4"> 
    <label class="control-label" for="input8">Input8</label> 
    <input type="text" class="form-control" id="input8" name="input8"> 
    </div></div> 

</form> 

JSFiddle sample

Image sample

Answer 1

我不知道是什麼導致的輸入插件要大一些，但是這是經典height problem花車。你需要一個clearfix。

在CSS中，像這樣：

.form-group.col-xs-4:nth-child(3n+1) { 
    clear:left; 
} 

或者，在HTML這樣的：

<form> 
    <div class="form-group col-xs-4"> 
     <label class="control-label" for="input1">Input1</label> 
     <input type="text" class="form-control" id="input1" name="input1"> 
    </div> 
    <div class="form-group col-xs-4"> 
     <label class="control-label" for="input2">Input2</label> 
     <div class="input-group"> 
      <input type="text" class="form-control" id="input2" name="input2"> 
      <span class="input-group-addon big"><strong>Go!</strong></span> 
     </div> 
    </div> 
    <div class="form-group col-xs-4"> 
     <label class="control-label" for="input3">Input3</label> 
     <input type="text" class="form-control" id="input3" name="input3"> 
    </div> 
    <div class="clearfix"></div> 
    <div class="form-group col-xs-4"> 
     <label class="control-label" for="input4">Input4</label> 
     <input type="text" class="form-control" id="input4" name="input4"> 
    </div> 
    <div class="form-group col-xs-4"> 
     <label class="control-label" for="input5">Input5</label> 
     <div class="input-group"> 
      <span class="input-group-addon">Go!</span> 
      <input type="text" class="form-control" id="input5" name="input5"> 
     </div> 
    </div> 
    <div class="form-group col-xs-4"> 
     <label class="control-label" for="input6">Input6</label> 
     <input type="text" class="form-control" id="input6" name="input6"> 
    </div> 
    <div class="clearfix"></div> 
    <div class="form-group col-xs-4"> 

     <label class="control-label" for="input7">Input7</label> 
     <input type="text" class="form-control" id="input7" name="input7"> 

    </div> 
    <div class="form-group col-xs-4"> 

     <label class="control-label" for="input8">Input8</label> 
     <input type="text" class="form-control" id="input8" name="input8"> 

    </div> 
</form> 

Demo