html - Bootstrap 3- Inline forms are not aligning properly in Chrome -

html - Bootstrap 3- Inline forms are not aligning properly in Chrome -

i using next code inline form (bootstrap 3) doesn't seem work google chrome. tried firefox , worked great. screenshots:

chrome

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

firefox

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

the html , css i'm using:

<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>

you should not set sr-only element 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>

anyway, if prepare border (and maybe floating issue), uncertainty thing change. may have css rule broke layout.

html css twitter-bootstrap twitter-bootstrap-3