html - 如何在 Bootstrap 中增加单选按钮的大小

Question

如何增加 Bootstrap 给我的单选按钮的默认大小？ 这是 fiddle 链接 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 和字体。

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>