Question

我的标签一直出现在选择上方。我希望他们都在同一条线上。请参阅jsfiddle：http://jsfiddle.net/jjgelinas77/9nL9x/

<div class="well well-sm">
  <form name="myForm" role="form" novalidate="novalidate" class="form-inline">
    <div class="form-group">
      <label>C-Band</label>
      <select id="cband" class="form-control">
        <option value="C15+">C15+</option>
        <option value="C12-14">C12-14</option>
        <option value="Other">Other</option>
      </select>
    </div>
    <div class="form-group">
      <label>C-Band</label>
      <select ng-model="form.cband2" id="cband2" class="form-control">
        <option value="C15+">C15+</option>
        <option value="C12-14">C12-14</option>
        <option value="Other">Other</option>
      </select>
    </div>
    <button class="btn btn-primary">Filter</button>
  </form>
</div>

Answer 1

引导程序中有一条CSS规则，在小屏幕尺寸上将.form-control的宽度设置为100％。因此，即使它浮动，它也会占据整个宽度，因此开始新的一条线。好消息是你只需要几行CSS来覆盖它：

.form-control {
width:auto;
display:inline-block;
}

希望这可以为任何仍然面临问题的人简化问题！ http://jsfiddle.net/c3m77ah6/2/

Answer 2

您必须将label包裹在select附近。像这样：

<div class="form-group">
  <label>C-Band
      <select id="cband" class="form-control">
         <option value="C15+">C15+</option>
         <option value="C12-14">C12-14</option>
         <option value="Other">Other</option>
      </select>
  </label> 
</div>

然后添加以下CSS：

.form-group label {
    float: left;
    text-align: left;
    font-weight: normal;
}

.form-group select {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

这是您更新的小提琴：Updated Fiddle

Answer 3

这个问题非常简单，以至于有一个Github项目正在解决它

https://fk.github.io/select2-bootstrap-css/

将他们的CSS文件放在Select2

的CSS之后

<link rel="stylesheet" href="css/select2.min.css">
<link rel="stylesheet" href="css/select2-bootstrap.css">

然后您可以将标签与选择

一起使用

<div class="form-group">
    <label for="sName">Select Title</label>
    <select class="js-example-basic-single form-control" id="sName">
    </select>
</div>

Answer 4

如果您使用最新的引导程序，它会工作： @import url（'http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'）;

请不要忘记使结果超过768px的列。只有屏幕超过768px时，Form-inline才有效。（只需用鼠标拖动一列）

问题在于css for

@media (min-width: 768px)
.form-inline .form-control {
    //old bootstrap    
    display: inline-block;

    // new bootstrap
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

Bootstrap 3：如何使用选择和标签创建内联表单？

4 个答案: