使用Bootstrap，我如何将单选框显示为按钮？

Question

目前我的表单包含以下代码：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<label for="opt-0"><input type="radio" name="opt" id="opt-0" checked>Option 0</label>
<label for="opt-1"><input type="radio" name="opt" id="opt-1">Option 1</label>
<label for="opt-2"><input type="radio" name="opt" id="opt-2">Option 2</label>

我想让单选按钮看起来像普通的按钮，而不是单选按钮的样子，就像这样：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary">Option 0</button>
<button class="btn btn-default">Option 1</button>
<button class="btn btn-default">Option 2</button>

我有一些收音机，希望让它们看起来像可切换的按钮。使用Bootstrap该如何实现？

- Likk

Answer 1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>    
<div class="btn-group" data-toggle="buttons">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option1"> Option 1
      </label>
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option2"> Option 2
      </label>
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option3"> Option 3
      </label>
</div>

- Shibu Thomas

---

这拯救了我的一天！！！- 用新的<button>标签替换按钮组中的旧标签，完美地工作！ - gonatee

@Shibu Thomas，在Bootstrap 3中显示下拉子菜单是否可行？ - Deepak Keynes

@ShibuThomas - 谢谢，看起来不错。在这个实现中没有标明所选选项。你知道如何添加吗？ - Avision

@Avision 将“active”类添加到您想要选择的按钮的标签中。 - ElliotSchmelliot

我发现所选按钮周围的光晕不够明显。有人见过解决这个问题的优雅方法吗？ - elachell

Answer 2

现在 Bootstrap 4 提供了一个可切换的按钮组toggleable button group，它可以在单击时为您管理活动状态。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>    
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-outline-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-outline-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-outline-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

- ElliotSchmelliot

---

你是否尝试在分组按钮上使用Bootstrap验证？：<div class ="invalid-feedback">Example invalid custom file feedback</div> 当输入必填时，我无法在提交时显示错误消息。我认为这是因为包装在标签中的输入。否则，对此有什么想法吗？ - javaxiss

尝试在 vue.js 的 v-model 中使用此代码时，data-toggle="buttons"会破坏我的绑定。 - Linuslabo

这是最好的答案。我将标签类设置为 btn btn-outline-primary，效果非常好。 - Cullub

Answer 3

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

jsfiddle-link
getbootstrap

- Igor Ivancha

Answer 4

你可以尝试查看按钮组，这是一组 - 好吧 - 按钮... 可以像单选按钮一样切换。

JSFiddle

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/js/bootstrap.min.js"></script>

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

希望这有所帮助！

- Mike Donkers

---

这个方法可能可行，但是存在以下问题：1. 如果我点击一个按钮，它不会保持选中状态；2. 没有<input>元素，我无法提交表单。 - Likk

看起来不错，但我试了一下发现按钮不能保持“切换”状态，所以并不是OP（或我）想要的。 - Greg Woods