Question

我正在开发一个rails应用程序，我有一个下拉提交表单，如下所示，

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

这里的问题是，下拉标签出现在一行中，然后是另一行中的下拉和提交按钮。我怎样才能使它出现在同一行。我正在使用bootstrap scss。

感谢您的帮助。

根据以下答案，我已将代码更改为

= form_tag({:controller => "r4d", :action => "result", :class => "form-inline"}, remote: true, method: :get) do
    .row
        .col-sm-12
            .col-sm-4
                = label_tag(:q, "Trip Type: ")
            .col-sm-4
                = select_tag(:q, options_for_select(r4d_options), class: "form-control")
            .col-sm-4
                = submit_tag("Get Trip Details", :id => "submit", :class => "btn btn-sm btn-default")

但是表单元素之间的间距太大而且看起来并不好。

Answer 1

如果您使用haml，请尝试以下格式设置一行内容

  .row
    .col-sm-12
      .col-sm-6
        = label_tag(:q, "Trip Type: ")
        = select_tag(:q, options_for_select(r4d_options, "r4d_002"), class: "form-control")
      .col-sm-6
        = submit_tag("Get Trip Details", :id => "submit", :class => "btn btn-sm btn-default")

带下拉标签，下拉并在同一行中提交按钮

1 个答案: