Question

我使用以下代码作为我的内联表单（bootstrap 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

您不应将sr-only元素置于内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>

无论如何，如果这修复了一个额外的边界（也许是浮动问题），我怀疑这是唯一要改变的东西。
您可能有另一个CSS规则打破了您的布局。

Answer 2

对我来说，它在两个浏览器上工作正常，可能是你的CSS工作不正常或者你使用的是旧版本的CSS。检查你的CSS或可能是一些其他属性覆盖你的CSS可能是问题。他们在这段代码中没问题。

<form class="form-inline" >
<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>

Bootstrap 3-内联表单在Chrome中无法正确对齐

2 个答案: