Bootstrap - 内联表单在 Chrome 中未正确对齐

Question

我正在为我的内联表单（引导程序 3）使用以下代码，但这似乎不适用于 Google Chrome。我用 Firefox 试了一下，效果很好。截图：

铬

http://oi58.tinypic.com/148jjw5.jpg

火狐

http://oi58.tinypic.com/5fiy41.jpg

我正在使用的 HTML 和 CSS：

<style>
.form-inline .form-group {
    margin-right: 10px;
margin-left: 4px;
}
.form-inline > .form-group {
    vertical-align: top;
}
</style>
<form id="callForm" action="sendCall.php"  method="post"  class="form-inline" >

<div class="form-group col-md-2">
<div class="input-group">
    <label class="sr-only" for="your">Your phone number</label>
<span class="input-group-addon">+91</span>
    <input type="text" class="form-control" id="your" name="your" placeholder="Your 10 digit number" required />
</div>
</div>


 <div class="form-group col-md-2">
 <div class="input-group">
    <label class="sr-only" for="frnd">Friend's number</label>
<span class="input-group-addon">+</span>
    <input text="text" class="form-control" id="frnd" name="frnd" placeholder="Your friend's number" required />
</div>
</div>
<div class="form-group">
<button  type="submit" class="btn btn-success">Connet</button>
</div>
</form>
<script>

Answer 1

您粘贴的代码似乎没有任何问题。您可能已经用完了容器内的空间。尝试增加容器的大小或减小表单控件的大小。 这是chrome上的jsfiddle，展开结果区：http://jsfiddle.net/w1o26gn0/