css - w3schools - tabella di bottoni html




Allineare le etichette con i pulsanti di opzione nel bootstrap (4)

Dal Bootstrap 3 è necessario utilizzare le classi checkbox-inline e radio-inline sull'etichetta.

Questo si occupa dell'allineamento verticale.

<label class="checkbox-inline">
    <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="radio-inline">
    <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>

Ho un modulo Bootstrap con alcuni pulsanti radio in linea e un'etichetta. Mi piacerebbe mantenere l'etichetta sulla stessa riga dei pulsanti, ma non riesco a farlo accadere. Ecco il mio approccio:

<form>
    <div class="control-group">
        <label class="control-label">Some label</label>
        <div class="controls">
            <label class="radio inline">
                <input type="radio" value="1"/>
                First
            </label>
            <label class="radio inline">
                <input type="radio" value="2"/>
                Second
            </label>
        </div>
    </div>
</form>

Fiddle: http://jsfiddle.net/GaDbZ/2/

Ho anche provato questo:

<form>
    <div class="form-inline">
        <label class="control-label">Some label</label>
        <label class="radio">
            <input type="radio" value="1"/>
            First
        </label>
        <label class="radio">
            <input type="radio" value="2"/>
            Second
         </label>
    </div>
</form>

Ma tutto è sfumato insieme. Fiddle: http://jsfiddle.net/GaDbZ/3/

Come posso ottenere la spaziatura orizzontale dalla prima combinata con la spaziatura verticale della seconda?

Inoltre, dovrei notare che nella vita reale, ho un sacco di altre cose in corso nella forma, quindi non voglio usare la form-horizontal perché crea margini funky che non jive con le altre cose che ho lì dentro.


Le intuizioni principali per me erano: - assicurarsi che il contenuto dell'etichetta arrivi dopo il campo della radio di input - ho ottimizzato il mio css per rendere tutto un po 'più vicino

.radio-inline+.radio-inline {
    margin-left: 5px;
}

Questo potrebbe funzionare per te, per favore prova questo.

<form>
  <div class="form-inline">
    <div class="controls-row">
      <label class="control-label">Some label</label>
      <label class="radio inline">
        <input type="radio" value="1" />First
      </label>
      <label class="radio inline">
        <input type="radio" value="2" />Second
      </label>
    </div>
  </div>
</form>

Se si aggiunge la classe 'radio inline' all'etichetta di controllo nella soluzione fornita dall'utente1938475, dovrebbe essere allineata correttamente con le altre etichette. Oppure se stai usando solo "radio" come il tuo secondo esempio, includi semplicemente la classe "radio".

<label class="radio control-label">Some label</label>

O per 'radio in linea'

<label class="radio-inline control-label">Some label</label>




twitter-bootstrap