Question

如何增加bootstrap给出的单选按钮的默认大小？这是小提琴链接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和fonts。

Answer 1

您可以增加高度和宽度。

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

或者您可以使用transform scale

input[type=radio]{
  transform:scale(1.5);
}

＆＃13;

label:first-child input[type=radio] {
  width: 30px;
  height: 30px;
}

label:last-child input[type=radio] {
  transform: scale(1.5);
}

＆＃13;

<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>

＆＃13;

Answer 2

在radio button #id

中添加css 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>

如何增加bootstrap

2 个答案: