Question

我在ASP.NET MVC5中有默认的注册表单。我添加了Google Recaptcha，但它与表单的其余部分不对齐，如下面的屏幕截图所示。我尝试了很多不同的方法，但没有成功。我甚至看了Bootstrap Recapture Form Tutorial website来检查他们是如何做到的。有人请指导我如何使用Bootstrap类将Recaptcha与表单的其余部分对齐吗？

 <form action="/Account/Register" class="form-horizontal" method="post" role="form">

    <div class="validation-summary-valid text-danger" data-valmsg-summary="true">
        <ul>
            <li style="display:none"></li>
        </ul>
    </div>

    <div class="form-group">
        <label class="col-md-2 control-label" for="Name">Name</label>
        <div class="col-sm-3 col-md-3 col-lg-3">
            <input class="form-control" data-val="true" data-val-length="The field Name must be a string with a maximum length of 255." data-val-length-max="255" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label" for="Email">Email</label>
        <div class="col-sm-3 col-md-3 col-lg-3">
            <input class="form-control" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="The Email field is required." id="Email" name="Email" type="text" value="" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label" for="Password">Password</label>
        <div class="col-sm-3 col-md-3 col-lg-3">
            <input class="form-control" data-val="true" data-val-length="The Password must be at least 6 characters long." data-val-length-max="100" data-val-length-min="6" data-val-required="The Password field is required." id="Password" name="Password" type="password" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="g-recaptcha" data-sitekey="MY_KEY"></div>
            <div class="form-group">
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Register" />
        </div>
    </div>
</form>

屏幕截图：

谢谢

Answer 1

要将您的Google验证码放在中心位置，您可以应用此选项：

<div class="col-md-12 text-center">
    <div class="g-recaptcha" data-sitekey="MY_KEY"></div>
        <div class="form-group">
           @if (TempData["recaptcha"] != null)
           {
               <p style="color:red">@TempData["recaptcha"]</p>
           }
        </div>
    </div>
</div>

并申请css：

.g-recaptcha > div {
    margin: 0 auto;
}

如何使用Bootstrap类对齐Google Recaptcha？

1 个答案: