1

No estoy pudiendo resolver el problema en el que aparece un radiobutton debajo del otro. Quiero colocarlo a la derecha del primero dentro del modal.

Así me aparece:

Imagen con disposición de elementos incorrecta

Y acá está el HTML de esa parte:

<div class="cc-selector">

        <input checked="checked" id="visa" type="radio" name="credit-card" value="visa" />

        <label class="drinkcard-cc visa" for="visa">

              <img src="<?php echo $url; ?>vistas/img/plantilla/efectivo.png" class="img-responsive">

        </label>

        <input id="mastercard" type="radio" name="credit-card" value="mastercard" />

        <label class="drinkcard-cc mastercard" for="mastercard">

              <img src="<?php echo $url; ?>vistas/img/plantilla/payu.png" class="img-responsive">   

        </label>

</div>

Sé que por CSS podría hacerlo dando position: relative y modificarlo como quiera, pero tengo entendido que directamente por HTML se tiene que poder también.

0

2 respuestas 2

2

Lo que necesitas es seccionar tu div en columnas de la siguiente forma

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <input checked="checked" id="visa" type="radio" name="credit-card" value="visa" />
      TU IMAGEN
    </div>
    <div class="col-md-6">
      <input id="mastercard" type="radio" name="credit-card" value="mastercard" />
      OTRA IMAGEN
    </div>
  </div>
</div>

Bootstrap tiene una definición en donde cada div equivale a 12 columnas, las cuales puedes seccionar mediante la clase col; en este caso sólo necesitas partir tu div en 2 que correspondería a un col-6 (la especificación de md, sm, lg sirve para la resolución de cada dispositivo)

1
  • Muchísimas gracias!! Me solucionó el problema Commented el 29 nov. 2018 a las 15:16
0

Intenta utilizando el sistema grid de bootstrap.

Solo tienes poner cada imagen dentro de un col-6 para que asi tome el 50% del ancho:

<div class="cc-selector">
    <div class='row'>

        <div class='col-md-6'>
            <input checked="checked" id="visa" type="radio" name="credit-card" value="visa" />
            <label class="drinkcard-cc visa" for="visa">
                  <img src="<?php echo $url; ?>vistas/img/plantilla/efectivo.png" class="img-responsive">
            </label>
        </div>

        <div class='col-md-6'>
            <input id="mastercard" type="radio" name="credit-card" value="mastercard" />
            <label class="drinkcard-cc mastercard" for="mastercard">
                  <img src="<?php echo $url; ?>vistas/img/plantilla/payu.png" class="img-responsive">   
            </label>
        </div>

    </div>
</div>
1
  • Muchas gracias! Me han respondido con el mismo concepto minutos antes de tu respuesta, por eso la coloqué como correcta. Commented el 29 nov. 2018 a las 15:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.