twitter bootstrap - radios - Bootstrap línea de radio en línea y botones de radio apilados

radio online gratis

Question

Gol

Tengo una cantidad dinámica de botones de radio. Quiero que aparezcan en línea y que aparezcan en la siguiente fila cuando sea necesario. Dependiendo del tamaño de la pantalla, quiero que se apilen.

Problema actual

En este momento, estoy usando:

<label class="radio-inline">
    <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
    Radio button''s label 1
</label>

<label class="radio-inline">
    <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
    Radio button''s label 2
</label>

...

<label class="radio-inline">
    <input type="radio" name="inlineRadioOptions" id="inlineRadioX" value="optionX">
    Radio button''s label X
</label>

Esos botones de radio como dije antes son dinámicos y puede haber un número de ellos. Actualmente aparecen en línea. Pero, cuando hay demasiados para caber en una fila (incluso en un monitor grande), se margin-left: 10px y hay un margin-left: 10px asociado con .radio-inline . Por lo tanto, el primer botón de opción en las filas 2, 3, 4, etc. es 10px a la izquierda del primer botón de opción en la fila 1. Esto es muy notable cuando la pantalla se encoge y todos los botones de opción están apilados. De nuevo, la fila 1 está a la izquierda, pero cada fila siguiente debajo se empuja 10px a la derecha.

Lo que he intentado

Traté de ponerlos en col-lg- #. En lo que respecta al apilamiento, esto funciona, pero provoca un ajuste de palabras en las etiquetas del botón de radio.

Answer 1

Creo que será:

.radio-inline+.radio-inline {
    margin-left: 0;
}

.radio-inline {
    margin-right: 10px;
}

http://jsfiddle.net/rm7n73ep/

Answer 2

La mejor apuesta es usar el sistema de grillas.

 <div class="row">
   <div class="col-md-">
     <label class="radio-inline">
       <input type="radio" name="inlineRadioOptions" id="inlineRadioX" value="optionX">
         Radio button''s label X
       </label>
   </div>
 </div>

De esta forma, cada vez que agregue uno irá al máximo de 12 y luego lo flotará a la siguiente línea. ASÍ QUE si se ajusta como dices, entonces puedes cambiar el número a un tamaño ligeramente mayor.

Answer 3

Tengo el problema similar.

prueba esto:

<label class="radio-inline" ***style="margin-left: 0px;"***>
    <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
    Radio button''s label 1 </label>

<label class="radio-inline" ***style="margin-left: 0px;"***>
    <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
    Radio button''s label 2 </label>

...

¡Deberías estar bien!

Answer 4

BIG Inline Bootstrap 3 Botones de radio

CSS

.radioButtonBig {
 transform: scale(1.7); 
}

HTML (usando Bootstrap 3)

               <div class="form-group">
                    <div class="form-group">
                        <label for="">3. Question three is all about inserting radio buttons:</label>
                        <p class="radio-inline"></p>
                        <label class="radio-inline">
                            <input class="radioButtonBig" type="radio" name="rbg6" value="yes" onclick="rbShowSection(this, ''q3text'');">
                            &nbsp;Yes
                        </label>
                        <p class="radio-inline"></p>
                        <label class="radio-inline">
                            <input class="radioButtonBig" type="radio" name="rbg6" value="no" onclick="rbShowSection(this, ''q3text'');">
                            &nbsp;No
                        </label>
                    </div>
                </div>

Nota: las etiquetas p en blanco solo crean espacios entre -pero super necesarios. Un poco manual, pero según sea necesario.

Answer 5

Solución 1

Use JS para recorrer cada botón de radio en el grupo, getBoundingClientRect() en cada uno, y el primero en tener un bottom diferente al anterior, elimine su margen izquierdo. Mi problema con esto es que tendría que hacerse en el cambio de tamaño de la pantalla. No soy un fan

Solución 2

Rápido y fácil, agregue margin-left: 10px al primer botón de radio en línea usando mi propia clase de CSS (no pirateando Bootstrap). A la baja, esto agrega una sangría a su grupo de botones de radio. Al revés, esta es una solución rápida y fácil, sin piratear, usa CSS sobre JS, y la sangría realmente se ve bien.

Solución 2 - Sidenote

Si no te importa piratear Bootstrap, ponlo en tu archivo CSS que se agrega después de Bootstrap.

@media (max-width: 768px)
{
    .radio-inline
    {
        display: block;
    }
}

Esto hace que los botones de radio se apilen inmediatamente cuando están en una pantalla más pequeña en lugar de flotar uno junto al otro. Noté que en algunos casos en una pantalla más pequeña, los primeros cuatro botones de radio estaban apilados, pero luego dos con menos texto se colocaban en la misma línea.