如何在引导程序中增加单选按钮的大小

Question

如何增加引导程序给出的单选按钮的默认大小？这是小提琴链接 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>

我已经使用了所需的 bootsrap js、css 和字体。

原文由 Saurabh Kumar Singh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以增加高度和宽度。

 input[type=radio] {
    width: 30px;
    height: 30px;
}

或者你可以使用 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>

原文由 Abhishek Pandey 发布，翻译遵循 CC BY-SA 3.0 许可协议