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

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

在bootstrap中有一个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

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

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

问题出在css上

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

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

Answer 5

使用form-group的form-inline类可以完成这项工作

<div class="form-group form-inline">
<label for="sel1">My InlineSelect: </label>             
    <select class="form-control" id="rotit">
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
</select>
</div>  

但是：ぁzxswい