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

以下是解决方案的一个变体。你只需要做内联标签和下拉列表。打开整个页面查看结果。

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