语义-UI "three inline fields" with dropdown

Question

我想要三个内联下拉菜单，它们不会在移动设备上堆叠并占据所有 space。

这是我目前使用的代码（RoR 代码）：

<div class="three fields">

      <!-- birthdate day -->
      <div class="inline field">
        <%= select_day(nil, {prompt: 'Day', use_two_digit_numbers: true, field_name: 'birthdate_day', prefix: :user}, {class: 'ui fluid search dropdown'}) %>
      </div>

      <!-- birthdate month -->
      <div class="inline field">
        <%= select_month(nil, {prompt: 'Month', field_name: 'birthdate_month', prefix: :user}, {class: 'ui fluid search dropdown'}) %>
      </div>

      <!-- birthdate year -->
      <div class="inline field">
        <% min_year = Date.today.year - @sign_up_min_age %>
        <% max_year = Date.today.year - @sign_up_max_age %>
        <%= select_year(nil, {prompt: 'Year', start_year: min_year, end_year: max_year,
                        field_name: 'birthdate_year', prefix: :user}, {class: 'ui fluid search dropdown'}) %>
      </div>
    </div>

three fields 他们使用所有 space，但在移动设备上获得堆栈。如果我用 inline fields 替换 three fields，他们不会使用所有 space。事实上，我想要 three inline fields 这样的东西。

我一遍又一遍地浏览文档并测试了很多组合，但我没有找到任何相关的东西。

提前感谢您的宝贵时间。

Answer 1

equal width 网格而不是字段如何：

<div class="ui equal width grid">
  <div class="column">
    <!-- birthdate day -->
    <%= select_day(nil, {prompt: 'Day', use_two_digit_numbers: true, field_name: 'birthdate_day', prefix: :user}, {class: 'ui fluid search dropdown'}) %>
  </div>
  <div class="column">
    <!-- birthdate month -->
    <%= select_month(nil, {prompt: 'Month', field_name: 'birthdate_month', prefix: :user}, {class: 'ui fluid search dropdown'}) %>
  </div>
  <div class="column">
    <!-- birthdate year -->
    <% min_year = Date.today.year - @sign_up_min_age %>
    <% max_year = Date.today.year - @sign_up_max_age %>
    <%= select_year(nil, {prompt: 'Year', start_year: min_year, end_year: max_year, field_name: 'birthdate_year', prefix: :user}, {class: 'ui fluid search dropdown'}) %>
  </div>
</div>

语义-UI "three inline fields" with dropdown

Semantic-UI "three inline fields" with dropdown

html

css

field

inline

semantic-ui