Question

我正在尝试使用bootstrap将recaptcha box与输入字段对齐。我在ckeditor上使用了这段代码。当显示验证码的超时时，recaptcha的位置发生了变化。如果显示错误后如何保持recaptcha盒的位置相同？

.g-recaptcha {
    margin-left: -1px!important;
    margin-top: -50px
}
width: 300px; !important;
.captcha{
	margin-left:7px;
	margin-top:-47px!important;
}
.recaptcha-wrap {
	position:relative;
	height:76px;
	padding:1px 0 0 1px;
	background:#222;
>div{
	position:absolute;
	bottom: 2px;
	right:2px;
	font-size:10px;
	color:#ccc;
	}
}
width: 300px; !important;
.captcha{
	margin-left:7px;
	margin-top:-47px!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<form class="well form-horizontal" action=" " method="post" 
    id="contact">
  
  <div class="form-group">
<div class="col-md-8 inputGroupContainer">
<div class="input-group required"><span class="input-group-addon"><i class="glyphicon glyphicon-envelope" ></i> </span> <input class="form-control" id="email" name="email" placeholder="Email" type="text" value="" /></div>
</div>
</div>
  
<div class="form-group">
<div class="col-md-8 inputGroupContainer">
<div class="input-group required"><span class="input-group-addon"><i class="glyphicon glyphicon-user" ></i> </span> <input class="form-control" id="name" name="name" placeholder="Name" type="text" value="" /></div>
</div>
</div>

<div class="form-group">
<div class="col-md-8 inputGroupContainer">
<div class="input-group">&nbsp;</div>
</div>
</div>

<div class="form-group">
<div class="col-md-8 inputGroupContainer">
<div class="input-group captcha"><input data-error="Check `I am human` !" id="recaptchaValidator" name="recaptcha" pattern="1" required="" style="visibility: hidden" type="text" value="" />
<div class="g-recaptcha" data-callback="test" data-sitekey="6Lc7vh8UAAAAAEkcVjo-Cz5rOKSmE22V7x8-0MXP" name="">&nbsp;</div>
</div>
</div>
</div>
        
   
 </form>

recaptcha在bootstrap上的位置

0 个答案: