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，请参阅Multiple Button Groups

＆＃13;

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

＆＃13;

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

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

2 个答案: