是否可以有一个带有输入组的按钮单选组？答案

【问题标题】：Is it possible to have a button radio group with an input group?是否可以有一个带有输入组的按钮单选组？
【发布时间】：2016-06-14 15:34:35
【问题描述】：

我想知道是否可以创建一个引导无线电 btn-group 以添加到输入组？

我知道可以创建类似于我的 sn-p 代码显示的内容，但我想创建它，其中两个单选按钮被隐藏并设置如下图所示的样式：

我希望它们成为实际的单选按钮，因为这是选择其中任何一个的标准做法。我不希望它们只是按钮。

我尝试像图片一样设置单选按钮的样式，但它对我来说不能正常工作，所以任何帮助都会很棒。

谢谢。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="input-group">
        <!-- class="input-group-addon" -->
        <input type="text" class="form-control" placeholder="some info here" aria-label="text input checkbox">
        <span class="input-group-addon">
        <input type="radio" aria-label="checkbox inside input group"> Female</span>
        <span class="input-group-addon">
        <input type="radio" aria-label="checkbox inside input group"> Male</span>

      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： jquery html css twitter-bootstrap

【解决方案1】：

你可以试试这个，它似乎完成了你的问题。

您可以将btn-group 替换为input-group-btn 请参阅Multiple Button Groups

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
  <div class="row">
    <div class="col-md-6">

      <div class="input-group">

        <input type="text" class="form-control" placeholder="Hello">

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

      </div>

    </div>
  </div>
</div>
<hr>

【讨论】：

【解决方案2】：

试试这个..

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="btn-group" data-toggle="buttons">
        <!-- class="input-group-addon" -->
        <label class="">
          <input type="text" id="text-input" class="form-control" placeholder="some info here" aria-label="text input checkbox">
        </label>
        <label class="btn btn-primary">
          <input type="radio" name="options" id="option1">Male
        </label>
        <label class="btn btn-primary">
          <input type="radio" name="options" id="option1">Female
        </label>

      </div>
    </div>
  </div>
</div>

【讨论】：