某些 INPUT 标签不起作用

Question

我有一个form HERE

乍一看，一切都很好，但是当我将浏览器调整为中小尺寸时，一些 input 标签（但不是全部）停止工作（比如 3 个input 标签后显示“Información del甚至”）。第一个checkbox 组也不再工作，但第二个组运行良好。

奇怪的是，当浏览器的尺寸很大时，每个标签似乎都能完美运行。我正在使用 Twitter-Bootstrap，所以我不知道它是否与此有关。

我还使用 W3-Validator 验证了代码，只收到了一些警告。

希望有人知道这里发生了什么。

<fieldset class="pb-md">
                    <div class="row">
                        <h3 class="featurette-heading centerText mb-md">Informaci&oacute;n del Evento</h3>
                        <div class="form-group col-md-4 col-xs-12">
                            <label for="tipoEvento">Tipo de Evento</label>
                            <input class="form-control" type="text" name="tipoEvento" id="tipoEvento" placeholder="tipo de evento">
                        </div>
                        <div class="form-group col-md-2 col-xs-6">
                            <label for="lugarEvento">Lugar</label>
                            <input class="form-control" type="text" name="lugarEvento" id="lugarEvento" placeholder="lugar del evento">
                        </div>
                        <div class="form-group col-md-2 col-xs-6">
                            <label for="fechaEvento">Fecha</label>
                            <input class="form-control" type="date" name="fechaEvento" id="fechaEvento" placeholder="dd/mm/aaaa">
                        </div>
                        <div class="form-group col-md-2 col-xs-6">
                            <label for="numeroInvitados"># de Invitados</label>
                            <input class="form-control" type="number" name="numeroInvitados" id="numeroInvitados" placeholder="lugar del evento">
                        </div>
                        <div class="form-group col-md-2 col-xs-6">
                            <label for="porcentajeForaneos">% de Foraneos</label>
                            <input class="form-control" type="number" name="porcentajeForaneos" id="porcentajeForaneos" placeholder="% foraneos">
                        </div>

                        <div class="col-xs-12 mt-xs mb-sm"><hr class="featurette-divider"></div>

                        <div class="form-group col-md-4">
                            <label for="tipoEvento">Tipo de Ceremonia</label>
                            <input class="form-control" type="text" name="tipoCeremonia" id="tipoCeremonia" placeholder="tipo de ceremonia">
                        </div>
                        <div class="form-group col-md-2 col-sm-3 col-xs-6">
                            <label for="numeroInvitadosCeremonia"># de Invitados</label>
                            <input class="form-control" type="number" name="numeroInvitadosCeremonia" id="numeroInvitadosCeremonia" placeholder="... de ceremonia">
                        </div>
                        <div class="form-group col-md-2 col-sm-3 col-xs-6">
                            <label for="numeroHorasCeremonia"># de Horas</label>
                            <input class="form-control" type="number" name="numeroHorasCeremonia" id="numeroHorasCeremonia" placeholder="# de horas">
                        </div>
                        <div class="form-group col-md-2 col-sm-3 col-xs-6">
                            <label for="desdeCeremonia">Desde las...</label>
                            <input class="form-control" type="time" name="desdeCeremonia" id="desdeCeremonia" placeholder="00:00 am">
                        </div>
                        <div class="form-group col-md-2 col-sm-3 col-xs-6">
                            <label for="hastaCeremonia">Hasta las...</label>
                            <input class="form-control" type="time" name="hastaCeremonia" id="hastaCeremonia" placeholder="00:00 pm">
                        </div>

                        <div class="col-xs-12 mt-xs mb-sm"><hr class="featurette-divider"></div>

                        <div class="form-group col-md-4">
                            <label for="tipoRecepcion">Tipo de Recepci&oacute;n</label>
                            <input class="form-control" type="text" name="tipoRecepcion" id="tipoRecepcion" placeholder="tipo de recepci&oacute;n">
                        </div>
                        <div class="form-group col-md-2 col-sm-3 col-xs-6">
                            <label for="numeroInvitadosRecepcion"># de Invitados</label>
                            <input class="form-control" type="number" name="numeroInvitadosRecepcion" id="numeroInvitadosRecepcion" placeholder="... de recepci&oacute;n">
                        </div>
                        <div class="form-group col-md-2 col-sm-3 col-xs-6">
                            <label for="numeroHorasRecepcion"># de Horas</label>
                            <input class="form-control" type="number" name="numeroHorasRecepcion" id="numeroHorasRecepcion" placeholder="# de horas">
                        </div>
                        <div class="form-group col-md-2 col-sm-3 col-xs-6">
                            <label for="desdeRecepcion">Desde las...</label>
                            <input class="form-control" type="time" name="desdeRecepcion" id="desdeRecepcion" placeholder="00:00 am">
                        </div>
                        <div class="form-group col-md-2 col-sm-3 col-xs-6">
                            <label for="hastaRecepcion">Hasta las...</label>
                            <input class="form-control" type="time" name="hastaRecepcion" id="hastaRecepcion" placeholder="00:00 pm">
                        </div>

                        <div class="col-xs-12 mt-xs mb-sm"><hr class="featurette-divider"></div>

                        <div class="form-group col-md-4 col-sm-4 col-xs-12">
                            <label for="diasEvento">D&iacute;as del Evento</label>
                            <input class="form-control" type="number" name="diasEvento" id="diasEvento" placeholder="#">
                        </div>
                        <div class="form-group col-md-2 col-sm-2 col-xs-6">
                            <label for="pedida">Pedida</label>
                            <input class="form-control" type="number" name="pedida" id="pedida" placeholder="#">
                        </div>
                        <div class="form-group col-md-2 col-sm-2 col-xs-6">
                            <label for="despedida">Despedida</label>
                            <input class="form-control" type="number" name="despedida" id="despedida" placeholder="#">
                        </div>
                        <div class="form-group col-md-2 col-sm-2 col-xs-6">
                            <label for="ensayo">Ensayo</label>
                            <input class="form-control" type="number" name="ensayo" id="ensayo" placeholder="#">
                        </div>
                        <div class="form-group col-md-2 col-sm-2 col-xs-6">
                            <label for="tornaboda">Tornaboda</label>
                            <input class="form-control" type="number" name="tornaboda" id="tornaboda" placeholder="#">
                        </div>

                        <div class="col-xs-12 mt-xs mb-sm"><hr class="featurette-divider"></div>

                        <div class="form-group col-sm-6">
                            <label for="hotelesSede">Hoteles Sede</label>
                            <input class="form-control" type="text" name="hotelesSede" id="hotelesSede" placeholder="hoteles sede">
                        </div>
                        <div class="form-group col-sm-6">
                            <label for="plan">Plan</label>
                            <input class="form-control" type="text" name="plan" id="plan" placeholder="plan">
                        </div>
                        <div class="col-xs-12 mt-md mb-xs"><hr class="featurette-divider"></div>
                    </div>
                </fieldset>

Answer 1

我无法确切了解为什么会发生这种情况，但我可以提供解决方法。

问题是您的所有<input/>s 都包含在<div>s 中。 <div>s 具有 position:relative 样式，但 <input/>s 没有。调整页面大小时，<div> 将位于<input>s 的顶部；当您点击<input/> 时，您实际上是在点击其上方的<div>。

如果您将以下属性添加到 .form-control 的 CSS 中，则在调整页面大小时输入将起作用：

.form-control {
    ...
    position:relative;
    z-index: 999; /* giving this a high number is the equivalent of using "Send to Front" in PhotoShop */
}