以引导水平形式并排放置下拉菜单和复选框

Question

我尝试在所有<select> 下拉列表之后添加一个复选框，但在同一行/行中。我很难做到这一点，我现在尝试了很长时间，但我无法自己让它工作。 CSS 来自 Bootstrap 3。

这是我的代码和表单的样子：

     <form role="form" id="newchar" name="newchar" method="POST" action="inc/insertchar.php">
        <div class="row">
           <div class="form-group col-sm-3">
              <label for="charname">Charactername</label>
              <a href="#" data-toggle="tooltip" data-placement="right" title="maximal 16 Zeichen - bestehend aus Zahlen und Buchstaben">
              <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
              </a>
              <input type="text" class="form-control" name="charname" id="charname" placeholder="Charactername" required="required" />
           </div>
        </div>
        <div class="row">
           <div class="form-group col-sm-3">
              <label for="c1">Circles:</label>
              <div class="form-group">
                 <select name="circle_1" id="c1" class="form-control circle-select">
                    <option value="">Circle 1</option>
                    <option value="class_1">Archer</option>
                    <option value="class_2">Cleric</option>
                    <option value="class_3">Swordsman</option>
                    <option value="class_4">Wizard</option>
                 </select>
              </div>
              <div class="form-group">
                 <select name="circle_2" id="c2" class="form-control circle-select" disabled="disabled">
                    <option value="">select Circle 1 first</option>
                 </select>
              </div>
              <div class="form-group">
                 <select name="circle_3" id="c3" class="form-control circle-select" disabled="disabled">
                    <option value="">select Circle 2 first</option>
                 </select>
              </div>
<!-- and more ... -->

完整代码和预览：https://jsfiddle.net/hd7fzp95/

Answer 1

您需要在表单上使用form-inline 类。

http://www.bootply.com/WpiddtxsOh