css - 如何使用 Bootstrap 使输入更宽？

Question

这是我们使用 form_tag 为带有 bootstrap 3 的 Rails 4.2 应用程序生成的搜索表单。

<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>