Reduce the clickable area of the label
Question
In the example below, if I use a label as <label class="radio"> and click area for the radio button it expands to the full width of the page.
Clicking outside this label (next to it inline) still trigger the radios button.
I tried label class as inline . But the radio buttons are arranged in a single line.
Is there any other bootstrap class that can be used for radio buttons/label to have them in next lines with fixed label width?
This is my code:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Form control: inline radio buttons</h2> <p>The form below contains three inline radio buttons:</p> <form> <label class="radio"> <input type="radio" name="optradio">Option 1 </label> <label class="radio"> <input type="radio" name="optradio">Option 2 </label> <label class="radio"> <input type="radio" name="optradio">Option 3 </label> </form> </div> </body> </html>
1 answers
solution1
0 ACCPTED 2018-02-06 15:31:07
Something like this can do for desktop:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Form control: inline radio buttons</h2> <p>The form below contains three inline radio buttons:</p> <form style="display: grid"> <label class="radio col-sm-2"> <input type="radio" name="optradio">Option 1 </label> <label class="radio col-sm-2"> <input type="radio" name="optradio">Option 2 </label> <label class="radio col-sm-2"> <input type="radio" name="optradio">Option 3 </label> </form> </div> </body> </html>
:view fullpage.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.