使用 Bootstrap，如何将单选输入显示为按钮？答案

【问题标题】：With Bootstrap, how do I show radio inputs as buttons?使用 Bootstrap，如何将单选输入显示为按钮？
【发布时间】：2016-04-12 02:12:54
【问题描述】：

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

<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 做到这一点？

【问题讨论】：

标签： html css twitter-bootstrap radio-button radio-group

【解决方案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，是否可以在 bootstrap 3 中显示下拉子菜单？
@Keynes 你可以参考这个w3schools.com/bootstrap/bootstrap_dropdowns.asp
@ShibuThomas - 谢谢，它看起来不错。在这个实现中，没有任何关于所选选项的指示。你知道怎么加吗？
如何在表单加载时使选项看起来被选中？您可以执行 checked="true" - 但没有视觉指示它已被选中？！

【解决方案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>

【讨论】：

您是否尝试在分组按钮上使用引导验证？：<div class="invalid-feedback">Example invalid custom file feedback</div> 当需要输入时，我无法在提交时显示错误消息。我认为是因为标签标签中的包装输入。否则，有什么想法吗？
人们试图将它与 vue.js v-model 一起使用，data-toggle="buttons" 为我破坏了绑定。
这是最好的答案。我将标签类设置为btn btn-outline-primary，效果非常好。

【解决方案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

【讨论】：

【解决方案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>

希望这会有所帮助！

【讨论】：

这可以工作，但是： 1. 如果我点击一个按钮，它不会保持选中状态； 2.没有<input>元素，无法提交表单
看起来不错，直到我尝试过。按钮不会保持“切换”状态，所以不是 OP（或我）想要的