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

Answer 4

这个问题非常严重，有一个 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 5

如果您使用最新的引导程序，它确实有效：@import url(' http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css ');

并且请不要忘记使结果超过 768 像素的列。Form-inline 仅在屏幕大于 768px 时才有效。（只需用鼠标拖动列）

问题在于css

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

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