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

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

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

1 个答案: