验证码在按钮上方

Question

我有我的验证码，它在工作，但我遇到的问题是提交按钮在验证码下面，我的意思是当我按下提交按钮时我也点击了验证码，我试过使用 z-index 但是它不起作用，我该如何解决？

<form action="{{ url('ticket/store') }}" method="post" id="ticket_form">
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="RUT" name="rut" required="">
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Nombre" name="name" required="">
                            </div>
                            <div class="form-group">
                                <input type="email" class="form-control" placeholder="Correo" name="email" required="">
                            </div>
                            <div class="form-group">
                                <input type="number" class="form-control" placeholder="Teléfono" name="phone" required="">
                            </div>
                            <div class="form-group">
                                <select name="case_type" class="form-control" required="">
                                    <option value="">- Tipo de Caso -</option>
                                    <option value="1">Felicitación</option>
                                    <option value="2">Reclamo</option>
                                    <option value="3">Sugerencia</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <select name="id_branch_office" class="form-control" required="">
                                    <option value="">- Sucursal -</option>
                                    @foreach($branch_offices as $branch_office)
                                        <option value="{{ $branch_office->id_branch_office }}">{{ $branch_office->view_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <textarea placeholder="Mensaje" class="form-control" rows="5" name="message" required=""></textarea>
                            </div>
                            <center>{!! htmlFormSnippet() !!}</center>

                            <br>
                            <button id="send" type="submit" class="btn btn-primary btn-orange">Enviar Mensaje</button>
                        </form>

可以在下个网站测试jisparking.cl

谢谢

Answer 1

如果您检查页面（在 Chrome 中，您可以右键单击 -> 检查）并选中生成的验证码的框，您可以看到它在按钮上延伸得很好。要阻止额外的内容溢出容器，您可以添加一些 CSS.

试试这个

<center style="overflow: hidden">{!! htmlFormSnippet() !!}</center>

验证码在按钮上方

The recaptcha is above the button

recaptcha

twitter-bootstrap

laravel