twitter-bootstrap 如何在引导程序中增加单选按钮的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48111515/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to increase radio button size in bootstrap
提问by Saurabh Kumar Singh
How do increase the default size of my radio buttons given by bootstrap? Here is fiddle link https://jsfiddle.net/thomassuckow/a815d1yz/
如何增加引导程序给出的单选按钮的默认大小？这是小提琴链接https://jsfiddle.net/thomassuckow/a815d1yz/
html
<form >
<div class="row">
<div class="col-sm-3">Test 1 - Bootstrap</div>
<div class="col-sm-9">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" id="q156" name="quality[25]" value="1" checked="checked" /> Normal
</label>
<label class="btn btn-default">
<input type="radio" id="q157" name="quality[25]" value="2" /> History
</label>
</div>
</div>
</div>
</form>
I have used the required bootsrap js, css and fonts.
我使用了所需的 bootsrap js、css 和字体。
回答by Abhishek Pandey
You can increase height and width.
您可以增加高度和宽度。
input[type=radio] {
width: 30px;
height: 30px;
}
Or you can use transform scale
或者你可以使用 transform scale
input[type=radio]{
transform:scale(1.5);
}
label:first-child input[type=radio] {
width: 30px;
height: 30px;
}
label:last-child input[type=radio] {
transform: scale(1.5);
}<form>
<div class="row">
<div class="col-sm-3">Test 1 - Bootstrap</div>
<div class="col-sm-9">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" id="q156" name="quality[25]" value="1" checked="checked" /> Normal
</label>
<label class="btn btn-default">
<input type="radio" id="q157" name="quality[25]" value="2" />History
</label>
</div>
</div>
</div>
</form>回答by Nims Patel
Add css radio button #idin transform:scale(..)
新增CSSradio button #id中transform:scale(..)
input#q156 {
transform: scale(2);
}
input#q156 {
transform: scale(2);
}<form>
<div class="row">
<div class="col-sm-3">Test 1 - Bootstrap</div>
<div class="col-sm-9">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" id="q156" name="quality[25]" value="1" checked="checked" /> Normal
</label>
<label class="btn btn-default">
<input type="radio" id="q157" name="quality[25]" value="2" />History
</label>
</div>
</div>
</div>
</form>