Problema dell'etichetta Bootstrap checkbox e del pulsante di opzione radio in Google Chrome

Question

Ho riscontrato un problema con alcune caselle di controllo inline Bootline e pulsanti di opzione, ma solo in alcune istanze di Chrome. Il sito web su cui sto lavorando è www.bostonsparkling.com.

Ecco uno screencap del comportamento previsto, e come si presenta nei seguenti ambienti:

• Safari sul mio Mac
• Safari sul mio iPhone
• Safari su iPad della mia famiglia
• Google Chrome su di un mio amico Mac
• Google Chrome sul PC di un mio amico

Correct Label Behavior: No Word Wrap

che segue è una screencap del comportamento rotto, che si manifesta nei seguenti ambienti:

• Google Chrome sul mio Mac
• Google Chrome sul mio PC

Incorrect Label Behavior: Unnecessary Word Wrap

Sembra che la casella di controllo e l'etichetta del pulsante di opzione il testo si sta avviando inutilmente, ma solo in alcune istanze di Chrome. Ecco alcune informazioni rilevanti per la risoluzione dei problemi ...

• Il cattivo comportamento non è sempre stato presente: mi ha preso in giro circa una settimana fa e non riuscivo a isolare il cambiamento offensivo.
• Non c'è alcuna connessione tra il mio Mac e il mio PC che mostra il comportamento scorretto, oltre a trovarsi fisicamente nella stessa stanza.
• Ho provato a disconnettere il mio account Google da Chrome su entrambe le macchine e disabilitare tutte le mie estensioni, pensando che forse un caso speciale con un'estensione stava rovinando i layout, ma senza dadi.

Quindi mi chiedo due cose ...

1. È qualcun altro vivendo il cattivo comportamento nella seconda immagine o è solo a me?

2. Dove ho sbagliato?

Ecco alcuni frammenti di codice rilevanti:

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

Modulo legati CSS ...

/* 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 */ 
} 

fammi sapere se hai bisogno di qualcos'altro, se ho infranto le regole di pubblicazione, o il mio codice fa schifo, heh - questo è il mio primo sito web in like, un decennio.Apprezzo l'aiuto!

P.S. Non riesco ad incorporare immagini o pubblicare più di 3 collegamenti ipertestuali senza 10 ripetizioni - mi dispiace per quello. : [

Answer 1

Si tratta di un bug con Chrome 24?

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

Answer 2

Prova white-space: nowrap; nel tuo .checkbox.inline CSS. Ciò assicurerà che non avvenga alcun word wrapping in nessun ambiente.