是否可以使用带有输入组的按钮无线电组？

Question

我想知道是否可以创建一个bootstrap radio btn-group来添加到输入组？

我知道可以创建类似我的代码段显示的东西,但是我想创建它,隐藏两个单选按钮,样式如下图所示:

我希望它们是实际的单选按钮,因为它的标准做法是选择其中之一.我不希望他们只是按钮.

我试图像图像那样设置单选按钮的样式,但它对我不起作用,所以任何帮助都会很棒.

谢谢.

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

Answer 1

你可以尝试这个,它似乎可以完成你的问题.

您可以btn-group使用input-group-btn查看多个按钮组进行换出

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