0
140
VistasEl complemento del botón Bootstrap no parece estar aplicando el complemento del botón
buen día,
Estoy tratando de agregar un grupo de opciones a mi aplicación, según el ejemplo que se encuentra aquí en Botones :: Casilla de verificación y Botones de radio . Sin embargo, cuando lo hago, el estilo no parece aplicarse correctamente y el grupo de opciones no funciona. No hay errores de javascript y, de lo contrario, he copiado y pegado el ejemplo. He usado Bootstrap mucho hasta ahora (solo estilo), así que creo que es un problema con javascript.
He creado un lápiz de código con lo mínimo de lo que estoy haciendo, y todavía parece ocurrir, por lo que no creo que sea algo que esté haciendo mal en mi aplicación (específicamente). También he incluido mis dependencias en la parte <head> del lápiz de código.
Según mi comprensión de la documentación, no debería ver los botones de opción y el botón active también debería cambiar.
¡Gracias por adelantado!
1 Respuestas
Responde la pregunta0
Tu intuición tiene razón cuando dices
Según mi comprensión de la documentación, no debería ver los botones de opción y el botón activo también debería cambiar.
Sin embargo, el código que está utilizando ( Botones :: Casilla de verificación y Botones de radio ) pertenece a la Bootstrap version 4.0 y el CDN de Bootstrap que está incluyendo en <head> pertenece a la versión 5.0 de Bootstrap.
Así que hay dos soluciones:
- Actualización del código html del grupo de botones a la documentación de la versión 5.0.
- Inserte la
version 4.0CDN en<head>.
Usando la opción 2, su código funciona perfectamente:
<html> <head> <!-- new CDN for bootstrap 4.0 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-outline-secondary active"> <input type="radio" name="radio_group" id="1" autocomplete="off" checked> Option 1 </label> <label class="btn btn-outline-secondary"> <input type="radio" name="radio_group" id="2" autocomplete="off"> Option 2 </label> <label class="btn btn-outline-secondary"> <input type="radio" name="radio_group" id="3" autocomplete="off"> Option 3 </label> </div> </body> </html>