Question

以下是我们使用form_tag为Rails 4.2 app和bootstrap 3生成的搜索表单。

<div class="container">
      <div class="page-header clearfix">
          <div class="pull-left">
             <h2><%= t(@title_) %></h2>
          </div>
      </div>

<%= form_tag search_url, :method => :get  do  %>
  <div class="input-group">
           <% @lf.each do |field, layouts| %>
     <div class="row">
       <div class="col-sm-4 form-group">           
         <%= label_tag layouts[:label] %>
      </div>       

       <div class="col-sm-6 form-group">   
        <% layouts = layouts.delete_if {|k, v| k == :label}%>
        <% case layouts.keys[0]%>
        <% when :date_field_tag %>
             <%= date_field_tag field.to_s, nil, placeholder: Date.today.to_s %>
        <% when :text_field_tag %>
          .....
        <% when :select_tag %>
          <%= select_tag field.to_s, options_for_select(layouts.values[0]), include_blank: true %>
        <% when :datetime_field_tag %>
         .......
        <% end %>
       </div>
    </div>
<% end  %>
  </div>

         <div class="btn-toolbar">
           <%= link_to t('Back'), SUBURI + "/view_handler?index=0", :class => BUTTONS_CLS['action'] %>
           <%= submit_tag t('Search') , :class =>  BUTTONS_CLS['action'] %>
         </div>

  <% end %>

</div>

以下是搜索页面：

如何使输入框宽两倍？我们尝试在div中使用不同的数字，但没有帮助。

Answer 1

您必须将整个表单放在表单类中，并将每个表单组放在不同的列大小中。这是一个示例代码;希望你明白。
演示：

 <form class="form-horizontal" role="form">
      <div class="form-group">
          <label class="col-sm-2 control-label">label 1</label>
          <div class="col-sm-2">
             <input type="text" id="your_id_1" class="form-control">
           </div>                            
      </div>
</form>

如何使用bootstrap扩大输入？

1 个答案: