Question

以下html：{}设置form_for的视图宽度。但是对form_tag它的作用不一样，标签宽度不均匀和窄：

<%= form_tag my_url, :method => :get, html: { class: 'form-horizontal col-sm-10'},
    wrapper: :horizontal_form,
    wrapper_mappings: {
    check_boxes: :horizontal_radio_and_checkboxes,
    radio_buttons: :horizontal_radio_and_checkboxes,
    file: :horizontal_file_input,
    boolean: :horizontal_boolean } do  %>
               ...
 <% end %>

form_tag没有html：选项，我们怀疑它可能不是使用bootstrap设置宽度的正确格式。使用bootstrap设置宽度的正确选项是什么？

Answer 1

html选项适用于form_for，但不适用于form_tag。

要解决您的问题，请替换：

<%= form_tag my_url, :method => :get, html: { class: 'form-horizontal col-sm-10'}

使用：

<%= form_tag my_url, :method => :get, class: 'form-horizontal col-sm-10'

Answer 2

说到你的观点：the right format for setting the width with bootstrap.

Bootstrap期待这种结构：

     <div class="row"> 
       ...
      <%= form_tag(form_tag my_url, :method => :get, :class => "form-group") do %>
          <div class="input-group">
               Fields here...          
              <span class="input-group-btn">
                <%= button_tag  name: nil, class: "btn btn-default", type: "submit" do %>            
                <% end %>
              </span> <!-- -btn -->
        </div> <!-- "input-group" --> 

    <% end %> <!-- form -->

   </div> <!-- row -->

水平表格

关于水平表单的快速添加，例如用于登录标题

的表单

<div class="form-inline">
    <div class="row">
    ...
        <div class="input-group input-group-sm">
            <span class="input-group-addon input-group-xs" id="basic-addon1">
                <%= f.button :submit, t('.login'), class: "btn btn-sm btn-default nudge_down_6" %></span>
            <span class="input-group-addon input-group-xs" id="basic-addon1">
                <%= f.input :email,  class: 'form-control input-group-xs nudge_down_6', required: false %></span>
            <span class="input-group-addon input-group-xs" id="basic-addon1">
                <%= f.input :password,  class: 'form-control input-group-xs nudge_down_6', required: false %></span>
        </div>

如果需要，请告诉我这段代码是否有用，我可以跟进更多内容。

调试说明

Web浏览器控制台显示所有内容并告诉所有人。您可以检查每个呈现的HTML元素，并查看哪个设置要更改的宽度然后覆盖它。但是如果你使用Bootstrap它为CSS标签指定的结构，那么覆盖调整应该是最小的。

Answer 3

以下是我们找到的解决方案：

<%= form_tag my_url, :method => :get, class: 'form-horizontal' do  %>
   #wrap each tag inside 'form-control', add 'control-label' to label and 'form-control' to tag.         ...
   <div class="form-group">
      <div class="control-label col-sm-4"> 
         <%= label_tag 'My Label' %>
      </div>
      <div class="col-sm-6">
          <%= date_field_tag 'My Date', nil, placeholder: Date.today.to_s, class: 'form-control' %>
      </div>
    </div>

<% end %>

以下是表单的外观：

以下是W3school关于Bootstrap表单的链接：http://www.w3schools.com/bootstrap/bootstrap_forms.asp

如何在Rails 4.2中使用Bootstrap设置form_tag的宽度？

3 个答案: