Html 如何使用引导类对齐GoogleRecapTCha?

Html 如何使用引导类对齐GoogleRecapTCha?,html,css,twitter-bootstrap,twitter-bootstrap-3,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,我有ASP.NET MVC5中的默认注册表单。我已经添加了GoogleRecaptcha,但它与表单的其余部分不一致,如下面的屏幕截图所示。我尝试过许多不同的方法,但都没有成功。我甚至看了看他们是怎么做的。是否有人可以指导我如何使用引导类将Recaptcha与表单的其余部分对齐 <form action="/Account/Register" class="form-horizontal" method="post" role="form"> <div class=

我有ASP.NET MVC5中的默认注册表单。我已经添加了GoogleRecaptcha,但它与表单的其余部分不一致,如下面的屏幕截图所示。我尝试过许多不同的方法,但都没有成功。我甚至看了看他们是怎么做的。是否有人可以指导我如何使用引导类将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>

名称 电子邮件 密码
屏幕截图:


谢谢

要将您的谷歌验证码置于中心位置,您可以应用以下内容:

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

您可以发送带有源代码的参考链接,并将完整的代码片段与实际的HTML输出一起发布。(ASP.NET代码对于调试HTML几乎毫无用处)同样,从您使用的Bootstrap4代码判断。对吗?(版本很重要,因为B4与B3不兼容)只需在浏览器窗口中查看页面,查看源代码,复制并粘贴为问题中的
代码片段
。只需在re captchaThank you的父标记上添加一个右拉引导类,但此表单不在中间。它在左边。
.g-recaptcha > div {
    margin: 0 auto;
}