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

这是你更新的小提琴:更新的小提琴

Answer 3

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

演示： http: //jsfiddle.net/9arahevn/2/