/ / Problema con la casilla de verificación Bootstrap y la etiqueta del botón de opción en Google Chrome - google-chrome, layout, twitter-bootstrap, casilla de verificación, botón de opción

Casilla de verificación de Bootstrap y problema en la etiqueta del botón de radio en Google Chrome - Google Chrome, diseño, Twitter-Bootstrap, casilla de verificación, botón de radio

Tengo un problema con algunas casillas de verificación en línea de Bootstrap y etiquetas de botones de opción, pero solo en algunos casos de Chrome. El sitio web en el que estoy trabajando es www.bostonsparkling.com.

Aquí hay una captura de pantalla del comportamiento previsto y su aspecto en los siguientes entornos:

  • Safari en mi Mac
  • Safari en mi iPhone
  • Safari en el iPad de mi familia
  • Google Chrome en la Mac de mi amigo
  • Google Chrome en la PC de mi amigo

Comportamiento correcto de la etiqueta: sin ajuste de línea

La siguiente es una captura de pantalla del comportamiento roto, que se manifiesta en los siguientes entornos:

  • Google Chrome en mi Mac
  • Google Chrome en mi PC

Comportamiento de etiqueta incorrecto: ajuste de palabra innecesario

Parece que la casilla de verificación y el texto de la etiqueta del botón de opción se están ajustando innecesariamente, pero solo en algunos casos de Chrome. Aquí hay información relevante para la resolución de problemas ...

  • El mal comportamiento no siempre ha estado presente: se me escapó hace aproximadamente una semana y no pude aislar el cambio ofensivo.
  • No hay conexión entre mi Mac y mi PC que exhibe el mal comportamiento, además de estar físicamente ubicado en la misma habitación.
  • Intenté desconectar mi cuenta de Google de Chrome en ambas máquinas e inhabilitar todas mis extensiones, pensando que quizás algún caso especial con una extensión estaba arruinando los diseños, pero sin dados.

Así que me pregunto dos cosas ...

  1. ¿Alguien más está experimentando el mal comportamiento en la segunda imagen o soy solo yo?

  2. ¿Dónde me equivoqué?

Aquí hay algunos fragmentos de código relevantes:

De index.html ...

<form class="form-horizontal" id="estimate" action="#estimate" method="post">
...
<!-- Room Input -->
<div class="control-group">
<label class="control-label">Which rooms need cleaning?</label>
<div class="controls">
<!-- Multiple Checkboxes -->
<label class="checkbox inline">
<input type="checkbox" name="kitchen" value="Yes">
Kitchen
</label>
<label class="checkbox inline">
<input type="checkbox" name="dining" value="Yes">
Dining Room
</label>
<label class="checkbox inline">
<input type="checkbox" name="living" value="Yes">
Living Room
</label>
<label class="checkbox inline">
<input type="checkbox" name="family" value="Yes">
Family Room
</label>
<label class="checkbox inline">
<input type="checkbox" name="office" value="Yes">
Office or Study
</label>
</div>
</div>

CSS relacionado con el formulario ...

/* Flip the margins and padding on inline checkboxes and radios */
.checkbox.inline,
.checkbox.inline + .checkbox.inline,
.radio.inline,
.radio.inline + .radio.inline {
margin-left: 0 !important;
margin-right: 15px !important;
padding-top: 0 !important;
padding-bottom: 5px !important;
}

/* Less vertical padding between form elements */
.form-horizontal
.control-group {
margin-bottom: 10px; /* instead of 20px */
}

Avíseme si necesita algo más, si violé alguna regla de publicación o si mi código apesta, je, este es mi primer sitio web en aproximadamente una década. Agradezco la ayuda!

PD No puedo incrustar imágenes o publicar más de 3 hipervínculos sin 10 repeticiones, lo siento. [

Respuestas

4 para la respuesta № 1

¿Es esto un error con Chrome 24?

https://github.com/twitter/bootstrap/issues/6599


10 para la respuesta № 2

Tratar white-space: nowrap; en tus .checkbox.inline CSS Esto asegurará que no se produzca ningún ajuste de palabras en ningún entorno.