0
287
ViewsCómo agregar un botón de radio en las opciones desplegables de arranque
¿Alguien puede ayudarme a agregar un botón de opción dentro de la opción desplegable? aquí estoy tratando de agregar un botón para obtener un botón de opción fuera del menú desplegable 
Por favor, eche un vistazo a esta ref... imágenes.
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> <style> .pos{position:absolute;} </style> </head> <body> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu"> <div class="form-group"> <input type="radio" class="form-check-input pos" value=""> <span>ption 2</span> </div> <div class="form-group"> <input type="radio" class="form-check-input pos" value=""> <span>ption 2</span> </div> <div class="form-group"> <input type="radio" class="form-check-input pos" value=""> <span>ption 2</span> </div> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </div> </div> </body> </html>
·
Juan Pablo Isaza
2 answers
Answer question0
Use esta estructura html para el botón de opción
<div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option1" checked> <label class="form-check-label" for="exampleRadios2"> option 2 </label> </div>Demostración de trabajo
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> <style> .pos{position:absolute;} </style> </head> <body> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu"> <div class="form-group"> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked> <label class="form-check-label" for="exampleRadios1"> option 1 </label> </div> </div> <div class="form-group"> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option1" checked> <label class="form-check-label" for="exampleRadios2"> option 2 </label> </div> </div> <div class="form-group"> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option1" checked> <label class="form-check-label" for="exampleRadios3"> option 3 </label> </div> </div> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </div> </div> </body> </html>
·
Juan Pablo Isaza
Report
0
¡Debes probar este código!
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu"> <div class="form-check"> <input type="radio" class="form-check-input pos" value=""> <label class="form-check-label">ption 2</label> </div> <div class="form-check"> <input type="radio" class="form-check-input pos" value=""> <label class="form-check-label">ption 2</label> </div> <div class="form-check"> <input type="radio" class="form-check-input pos" value=""> <label class="form-check-label">ption 2</label> </div> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </div>
·
Juan Pablo Isaza
Report
Answer question