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

Question

我正在为我的内联表单 (bootstrap 3) 使用以下代码，但这似乎不适用于 Google Chrome。我用 Firefox 试过了，效果很好。截图:

Chrome

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

你不应该把你的 sr-only 元素放在 inside input-group 中:

<div class="form-group col-md-2">
  <label class="sr-only" for="your">Your phone number</label>
  <div class="input-group">
    <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>

无论如何，如果这修复了一个额外的边框(并且可能是一个 float 问题)，我怀疑这是唯一需要改变的东西。
您可能有另一个 CSS 规则破坏了您的布局。