如何让Rails表单的下拉框标签、下拉框与提交按钮同行显示？

Hey there! Since you're already using Bootstrap classes in your form, getting the label, select dropdown, and submit button to all sit on the same line is totally doable with a few simple tweaks. Here are a couple of reliable approaches:

1. Use Bootstrap's form-inline class (quickest fix) #

Bootstrap's built-in form-inline class is made to render form elements inline on wider screens. Just add it to your form_tag, plus small margin classes to keep elements from feeling cramped:

#container
= form_tag({:controller => "r4d", :action=> "result" }, remote: true, method: :get, class: "form-inline") do
  = label_tag(:q, "Trip Type: ", class: "mr-2")
  = select_tag(:q, options_for_select(r4d_options, "r4d_002"), class: "form-control mr-2")
  = submit_tag("Get Trip Details", :id => "submit", :class => "btn btn-sm btn-default")

The mr-2 classes add a small right margin to the label and select box, giving them some breathing room. On smaller mobile screens, this setup will automatically stack elements vertically—great for responsiveness!

2. Use Bootstrap's grid system (more control) #

If you want precise control over alignment or widths, wrap each element in a grid column:

#container
= form_tag({:controller => "r4d", :action=> "result" }, remote: true, method: :get) do
  <div class="row align-items-center">
    <div class="col-auto">
      = label_tag(:q, "Trip Type: ")
    </div>
    <div class="col-auto">
      = select_tag(:q, options_for_select(r4d_options, "r4d_002"), class: "form-control")
    </div>
    <div class="col-auto">
      = submit_tag("Get Trip Details", :id => "submit", :class => "btn btn-sm btn-default")
    </div>
  </div>

• row creates a horizontal container for your elements
• align-items-center ensures all elements are vertically centered relative to each other
• col-auto makes each column only take up the width its content needs, keeping everything on one line

3. Force inline layout on all screen sizes #

If you need elements to stay on the same line even on small screens (note: this isn't always ideal for mobile, but sometimes necessary), use Bootstrap's flex utility classes:

#container
= form_tag({:controller => "r4d", :action=> "result" }, remote: true, method: :get, class: "d-flex align-items-center") do
  = label_tag(:q, "Trip Type: ", class: "mr-2")
  = select_tag(:q, options_for_select(r4d_options, "r4d_002"), class: "form-control mr-2")
  = submit_tag("Get Trip Details", :id => "submit", :class => "btn btn-sm btn-default")

d-flex turns the form into a flex container, and align-items-center keeps all elements vertically aligned properly.

Just double-check that Bootstrap's CSS is properly included in your Rails app—without that, these classes won't work their magic!

内容的提问来源于stack exchange，提问作者santhosh kumar