如何增大Bootstrap中单选按钮的默认尺寸？附示例代码

嘿，这个需求超容易实现的！你用的是Bootstrap的按钮式单选组，想要放大它的尺寸，有两种简单的路子，我给你掰扯清楚：

Bootstrap本身就预设了按钮尺寸的样式类，不用自己写CSS，直接套用就行：

• 给每个按钮标签（也就是<label>里的btn-default）后面加上btn-lg，这是Bootstrap自带的大尺寸按钮类
• 修改后的示例代码如下：

<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 btn-lg active">
          <input type="radio" id="q156" name="quality[25]" value="1" checked="checked" /> Normal
        </label>
        <label class="btn btn-default btn-lg">
          <input type="radio" id="q157" name="quality[25]" value="2" /> History
        </label>
      </div>
    </div>
  </div>
</form>

这样改完，按钮直接变成Bootstrap统一风格的大尺寸，省心又规范。

如果Bootstrap预设的大尺寸不符合你的要求，想要更灵活的大小，那就自己写自定义CSS：

1. 先给你的按钮组加一个专属类，比如custom-large-radio-group，避免影响页面上其他按钮
2. 写CSS样式调整按钮的内边距、字体大小等属性：

.custom-large-radio-group .btn {
  padding: 14px 28px; /* 内边距越大，按钮整体越大 */
  font-size: 20px; /* 控制文字大小 */
  border-radius: 8px; /* 可选：调整按钮圆角 */
}

3. 最后把自定义类加到HTML的btn-group上：

<form >
  <div class="row">
    <div class="col-sm-3">Test 1 - Bootstrap</div>
    <div class="col-sm-9">
      <div class="btn-group custom-large-radio-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>

你可以根据自己的需求调整CSS里的数值，直到得到满意的大小。

另外提一句：这里的原生单选按钮是被隐藏的，用户看到的其实是按钮样式的<label>，所以调整按钮的大小就等同于调整整个单选控件的显示尺寸，完全不用管原生radio的大小哦～

内容的提问来源于stack exchange，提问作者Saurabh Kumar Singh