Question

我正在尝试在Bootstrap 4上的选择表单输入中添加内联标签。我从stackoverflow回答中为Bootstrap 3（available here）复制了解决方案，但它无法正常工作（我的代码在下面）。我还尝试添加＆＃34; form-inline＆＃34;到主要表格标签（虽然我更喜欢不需要的解决方案），但即使这样做也没有用。我也尝试将下面代码的各个部分放在行和列中，但没有一个工作。有什么建议吗？

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

Answer 1

请参阅“实用工具”下的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>

Answer 2

上面桑德拉的回答有效。我必须在它之前尝试许多div / rows / cols等的排列。为了节省遇到相同问题的未来开发人员的时间，这对我有用：我必须将标签和选择放在单独的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>

Answer 3

要使 <select> 标签与 <label> 保持一致，您只需将 style="width: auto" 添加到 <select> 标签，因为 custom-select 甚至 {{1 }} 类有一个 form-control 还要记住，在 Bootstrap 4 上，您需要在 width: 100% 标签上使用 custom-select 类： https://getbootstrap.com/docs/4.0/components/forms/#select-menu

在Bootstrap 4

3 个答案: