我有form HERE
初看起来一切都很好但是当我将浏览器调整为中等大小时，一些input标签（但不是所有标签）停止工作（就像3 input标签之后说“InformacióndelEvento”）。此外，第一个checkbox组不再起作用，但第二组效果不错。
奇怪的是，当浏览器尺寸较大时，每个标签似乎都很完美。我正在使用Twitter-Bootstrap，所以我不知道它是否与此相关。
我还使用W3-Validator验证了代码并得到了一些警告。
希望任何人都能了解这里发生的事情。
<fieldset class="pb-md">
<div class="row">
<h3 class="featurette-heading centerText mb-md">Informació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ón</label>
<input class="form-control" type="text" name="tipoRecepcion" id="tipoRecepcion" placeholder="tipo de recepció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ó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í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>
答案 0 :(得分：1)
我无法弄明白为什么发生了这种情况，但我可以提供修复。
问题是，<input/> s中包含了所有<div>个问题。 <div>具有position:relative样式，但<input/>不具有<div>样式。调整页面大小后，<input>将位于<input/>之上;当您点击<div>时，您实际上是点击了它上面的.form-control。
如果您将以下属性添加到.form-control {
...
position:relative;
z-index: 999; /* giving this a high number is the equivalent of using "Send to Front" in PhotoShop */
}
的CSS中，那么输入将在页面调整大小时起作用：
{{1}}