Question

我一直在尝试对齐我的按钮并形成输入标签，但是如果我使用普通的HTML表单进行引导，则似乎没有任何效果。

<div class="input-group">
   <input type="text" class="form-control">
   <span class="input-group-btn">
      <button class="btn btn-primary" type="button">Go!</button>
   </span>
</div>

我得到一个对齐的输入框和按钮，但是当我在我的erb中使用带有以下内容的form_tag助手时;

<%= form_tag search_nut_databases_path, :class => "form-inline", method: :get do %>
<div class="input-group">
  <%= text_field_tag :search, params[:search], class: "form-control",  :placeholder => "search database" %>
   <span class="input-group-btn">
     <%= submit_tag 'submit', class: "btn btn-primary" %>
 </span>
 </div>
<% end %>

我得到一个未对齐的盒子，我检查了css，没有任何东西应该影响它

感谢

Answer 1

将您的代码包含在表单组类中..如下所示

<div class="form-group">
 <div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-btn">
       <button class="btn btn-primary" type="button">Go!</button>
    </span>
 </div>
</div>

Answer 2

我不知道你是否能够解决这个问题，但我也有类似的问题，能够正确地进行对齐。

以下是我尝试修改的代码段

<%= form_tag(search_nut_databases_path, :method => "get", id: "search-form", :class => "form-inline") do %>
        <div class="input-group">
         <%= text_field_tag :search, params[:search], :class => "form-control", placeholder: "search database" %>
        </div>
        <!--This actually works for the button-->
        <%= button_tag(type: 'submit', class: "btn btn-default") do %>
                <i class="icon-ok icon-white"></i> Search
        <% end %>
<% end %>

我仍然面临的唯一问题是自定义text_field_tag的大小，因为：class =＆gt;当存在“表单控制”时，'input-large'不会被触发。

但是，我希望这段代码对您有所帮助。

AKS

form_tag无法对齐按钮和输入框 - rails 4 bootstrap

2 个答案: