Twitter bootstrap btn-group不允许你右边的内联文字？

Question

我试图在同一行和该顺序的表单中显示3个div（一个单选按钮，一个按钮组和一个选择），但我仍然一直在失败。

我试过this solution但没有帮助我。我真的不知道这是一个常见问题还是我遗漏了什么。

PICTURE

HTML

        <form>
            <div class="form-group row">
                <div class="col-sm-2">
                  <label for="f-option1">
                  <input onClick="doSomething()" type="radio" id="f-option1" name="selector" checked>
                  My radio button</label>
                </div>
                <div class="btn-toolbar">
                    <label for="inputEmail3" class="col-sm-1 control-label">My group button:</label>
                    <div class="col-sm-2 btn-group" data-toggle="buttons">
                        <label class="btn btn-default"><input type="radio" name="options" id="option5">10</label>
                        <label class="btn btn-default"><input type="radio" name="options" id="option6">30</label>
                        <label class="btn btn-default"><input type="radio" name="options" id="option7">60</label>
                        <label class="btn btn-default"><input type="radio" name="options" id="option8">90</label>
                    </div>
                </div>   
                <label for="inputEmail2" class="col-sm-1 col-form-label">My select:</label>
                <div class="col-sm-2">
                    <select class="form-control" id="sel1">
                        <option>1</option>
                        <option>2</option>
                    </select>

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

Answer 1

试试这个。

<div class="form-group row">
            <div class="col-sm-2">
              <label for="f-option1">
              <input onclick="doSomething()" type="radio" id="f-option1" name="selector" checked="">
              My radio button</label>
            </div>
            <div class="btn-toolbar" "="">
                <label for="inputEmail3" class="col-sm-1 control-label">My group button:</label>
                <div class="col-sm-2 btn-group" data-toggle="buttons">
                    <label class="btn btn-default"><input type="radio" name="options" id="option5">10</label>
                    <label class="btn btn-default"><input type="radio" name="options" id="option6">30</label>
                    <label class="btn btn-default"><input type="radio" name="options" id="option7">60</label>
                    <label class="btn btn-default"><input type="radio" name="options" id="option8">90</label>
                </div>
              <label for="inputEmail2" class="col-sm-1 col-form-label">My select:</label>
            <div class="col-sm-2">
                <select class="form-control" id="sel1">
                    <option>1</option>
                    <option>2</option>
                </select>

            </div>
            </div>   

        </div>

Answer 2

以下是解决方案的一种变体。您只需要进行内联标签和下拉列表。打开整页查看结果。

＆＃13;

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <form>
      <div class="col-lg-4">
        <label for="f-option1">
          <input onClick="doSomething()" type="radio" id="f-option1" name="selector" checked>My radio button
        </label>
      </div>
      <div class="col-lg-4">
        <div class="input-group">
          <label for="inputEmail3" class="control-label">My group button:</label>
          <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default">
              <input type="radio" name="options" id="option5">10</label>
            <label class="btn btn-default">
              <input type="radio" name="options" id="option6">30</label>
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="input-group">
          <label for="inputEmail2" class="control-label">My select:</label>
          <select class="form-control" id="inputEmail2">
            <option>1</option>
            <option>2</option>
          </select>
        </div>
      </div>
    </form>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;