Twitter bootstrap 在引导4中的选择字段上显示标签内联

我正在尝试向Bootstrap4上的选择表单输入添加一个内联标签。我从stackoverflow答案中复制了Bootstrap 3（）的解决方案，但它不起作用（我的代码如下）。我还尝试将“forminline”添加到主表单标记中（尽管我更喜欢不需要这样做的解决方案），但即使这样也不起作用。我还尝试将下面代码的各个部分分为行和列，但都不起作用。有什么建议吗

<div class="row mt-2">
    <div class="form-group">

      <label for="from_year"><small><strong>Search from year:</strong></small></label>
      <select name="from_year" class="form-control form-control-sm" id="from_year">
        <option value="1980">1980 (default)</option>
        {% for year in from_years %}

        <option value="{{ year }}">{{ year }}</option>

        {% endfor %}
      </select>
    </div>
  </div>

从年份开始搜索：
1980年（默认）
{年的%（从年开始）}
{{year}
{%endfor%}

参见实用程序下的V4文档。他们有一个内置的

d-inline

或

d-inline-block

类，可以应用于

select

元素，或者您可以将其包装在

span

中，这也将内联元素，但有点草率

<div class="container">
    <div class="row mt-2">
        <div class="form-group">

            <label class="d-inline-block" for="from_year"><small><strong>Search from year:</strong></small></label>

            <select name="from_year" class="form-control form-control-sm d-inline-block" style="width: auto;" id="from_year">
                <option value="1980">1980 (default)</option>
                {% for year in from_years %}

                <option value="{{ year }}">{{ year }}</option>

                {% endfor %}
            </select>

        </div>
    </div>
</div>

从年份开始搜索：
1980年（默认）
{年的%（从年开始）}
{{year}
{%endfor%}

桑德拉的上述回答奏效了。我只是尝试了许多div/rows/col等的排列。为了为将来遇到同样问题的开发人员节省时间，以下是对我有效的方法：我必须将标签和select放在单独的div中，所有这些都放在一个d-inline-flex div中

<div class="d-inline-flex mt-2">

      <div class="mr-2">
        <label for="from_year"><small><strong>Search from year:</strong></small></label>
      </div>
      <div>
        <select name="from_year" class="form-control form-control-sm" id="from_year">
          <option value="1980">1980 (default)</option>
          {% for year in from_years %}

          <option value="{{ year }}">{{ year }}</option>

          {% endfor %}
        </select>
      </div>
  </div>

从年份开始搜索：
1980年（默认）
{年的%（从年开始）}
{{year}
{%endfor%}

要使

标记与

保持内联，只需将

style=“width:auto”

添加到

标记中，因为

自定义选择

甚至

表单控件

类都有

宽度：100%

还要记住，在Bootstrap 4上，您需要使用

标记上的

自定义选择
类：
我更新了上面的答案。您不需要这么多标记，但我忘记了
.form control
类向select添加了一个100%宽度属性，因此您需要通过手动设置宽度属性来控制它。不过，flex解决方案也可以工作。