中没有正确对齐

中没有正确对齐

关注
发信
关注(28)粉丝(399)

Bootstrap 3- 内联表单在 Chrome 中没有正确对齐

本文介绍了Bootstrap 3- 内联表单在 Chrome 中没有正确对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我将以下代码用于我的内联表单(引导程序 3)，但这似乎不适用于 Google Chrome.我在 Firefox 上尝试过，效果很好.截图:

Chrome

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

火狐

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

我使用的 HTML 和 CSS:

.form-inline .form-group {右边距:10px；左边距:4px；}.form-inline >.form-group {垂直对齐:顶部；}</风格><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">您的电话号码</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 class="form-group col-md-2"><div class="input-group"><label class="sr-only" for="frnd">朋友的号码</label><span class="input-group-addon">+</span><input text="text" class="form-control" id="frnd" name="frnd" placeholder="你朋友的号码" required/>

<div class="form-group"><button type="submit" class="btn btn-success">Connet</button>

</表单><脚本>

解决方案

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

<div class="form-group col-md-2"><div class="input-group"><label class="sr-only" for="frnd">朋友的号码</label><span class="input-group-addon">+</span><input text="text" class="form-control" id="frnd" name="frnd" placeholder="你朋友的号码" required/>

<div class="form-group"><button type="submit" class="btn btn-success">Connet</button>

</表单>

I am using the following code for my inline form (bootstrap 3) but that doesn't seem to work with Google Chrome. I tried it with Firefox and it worked great. Screenshots:

Chrome

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

Firefox

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

The HTML and 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>
解决方案

For me its working fine on both browser, may be your CSS is not working properly or you are using the old version CSS.check your css or may be some other properties are overwriting your css that could be the problm.their is no problem in this code. 

<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 中没有正确对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-05 10:43
Powered by LMLPHP ©2024 中没有正确对齐 0.039980