Acudo aquí porque no logro que el div
con clase invalid-feedback
se ubique de manera correcta al usar radio buttons dentro de bootstrap 4
Estoy manejando el siguiente código
<div class="container">
<form>
<h5>Formulario!</h5>
<div class="form-group">
<label for="Conex_BT">Conexión</label>
<select class="form-control is-invalid">
<option value="">No aplica.</option>
</select>
<div class="invalid-feedback" id="Err_Conex_BT">El medio de conexión es un campo obligatorio!</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input is-invalid" data-val="true" data-val-required="Definir si posee neutro es obligatorio!" id="Conex_BT_N_True" name="Conex_BT_N" required="required" type="radio" value="True">
<label for="Conex_BT_N_False" class="form-check-label">
Con Neutro
</label>
</div>
<div class="form-check">
<input class="form-check-input is-invalid" id="Conex_BT_N_False" name="Conex_BT_N" required="required" type="radio" value="False">
<label for="Conex_BT_N_False" class="form-check-label">
Sin Neutro
</label>
<div class="invalid-feedback" id="Err_Conex_BT_N">Definir si posee neutro es obligatorio!</div>
</div>
</div>
Dejo el JSFiddle donde puede verse claramente cual es el problema.
Lo que pasa es lo siguiente, tanto en los input
de tipo texto, como en los select
el div
de clase invalid-feedback
se ubica correctamente, debajo del control y alineado a la izquierda.
El asunto es que con los radio button deja un margen a la izquierda, asumo, que se debe a que está dentro de la clase form-check
en lugar de form-group
, pero el problema es que si lo ubico en esta segunda, la clase invalid-feedback
está en display: none;
¿Cuál sería el método correcto de ubicar el div para que se muestre donde corresponde?
Desde ya muchísimas gracias por la ayuda!