bootstrap 3 在内联选择框中显示标签答案

【问题标题】：bootstrap 3 show label in inline selectboxbootstrap 3 在内联选择框中显示标签
【发布时间】：2019-07-02 18:33:41
【问题描述】：

我在引导程序 3 中为选择框菜单设置标签，如下所示：

<div class="col-lg-2">
    <label>Filter</label>
        <select class="form-control" name="sort">
            <option value="1">1</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
        </select>
</div>

在输出中查看选择框菜单顶部的标签：

我需要像这样显示选择框菜单的内联标签：

如何在内联中显示标签？！

演示JSFIDDLE

【问题讨论】：

阅读引导文档getbootstrap.com/css/#forms-horizontal

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

你需要把你的标签和你的选择放在一个“组”中，所以我们有这个：

<div class="form-group">
    <label for="sort" class="col-sm-2 control-label"> Filter </label>
    <div class="col-sm-10">
        <select class="form-control" name="sort" id="sort">
            <option value="1">1</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
        </select>
     </div>
</div>

【讨论】：

帮助！谢谢！
我为 BS4 尝试了完全相同的方法，但它不起作用：
选择

谁能建议我在这里做错了什么？
@Aqeel，我认为您必须在第一个 div 中添加行类！见：codepen.io/anon/pen/JmLqMY

【解决方案2】：

你想要form-inline - 这个例子在全屏模式下工作（不知道为什么这段代码 sn-p 在不处于全屏模式时会换行）但是试一试它应该适合你。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
  <div class="form-group">
    <label for="dashboard-filter">Filter By</label>
    <select id="dashboard-filter" class="form-control">
      <option>1</option>
      <option>2</option>
    </select>
  </div>
</form>

文档在这里：https://getbootstrap.com/docs/3.4/css/#forms-inline

【讨论】：