css - Rails & Bootstrap 使按钮与文本字段内联

Question

我正在开发 Web 应用程序的前端。我想知道如何使按钮和文本字段对齐。另一个问题是如何使错误消息显示在文本框下方？图片: https://www.dropbox.com/s/vsdy3730flraes3/Screen%20Shot%202013-12-01%20at%204.47.20%20PM.png

代码如下:

    <div class="input-group" align="center" >

    <%= form_tag(location_search_path,method: "get" ) do %>
        <%= text_field_tag('location', params[:location], :size => 150, :placeholder=> "Enter city or zip code") %> 
        <%= button_tag(type: "submit", class: "btn  btn-success ") do %>
         Search 
                 <i class="icon-search"></i>
        <% end %>
    <% end %>
</div>
    <% [:notice, :error, :alert].each do |level| %>
      <% unless flash[level].blank? %>
              <div data-alert="alert" class="alert-message <%= flash_class(level) %> fade in" align="center">
          <%= content_tag :p, flash[level] %>
      </div>
     <% end %>
    <% end %>

Answer 1

添加 <div class="form-inline">到您的表单元素以将按钮和字段放在同一行上，我想您可以给我们一个 <p>使消息显示在其下方，尽管我可能会在一行中设置输入组，并以列为中心而不是您正在使用的对齐标记，然后将消息放入新的 <row> 中。在同一列中低于它。

<div class="input-group" align="center" >
    <div class="form-inline">
      <%= form_tag(location_search_path,method: "get" ) do %>
      <%= text_field_tag('location', params[:location], :size => 150, :placeholder=> "Enter city or zip code") %> 
      <%= button_tag(type: "submit", class: "btn  btn-success ") do %>
       Search 
             <i class="icon-search"></i>
      <% end %>
    <% end %>
    </div>
</div>
<p>
    <% [:notice, :error, :alert].each do |level| %>
        <% unless flash[level].blank? %>
        <div data-alert="alert" class="alert-message <%= flash_class(level) %> fade in" align="center">
        <%= content_tag :p, flash[level] %>
        </div>
     <% end %>
<% end %>