Css 铁路及；引导使按钮与文本字段内联

我正在开发web应用程序的前端。我想知道如何使按钮和文本字段对齐。另一个问题是如何使错误消息显示在文本字段的正下方？ 图片：

代码如下：

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

150，：占位符=>“输入城市或邮政编码”）%>
搜寻

将

添加到表单元素中，以使按钮和字段位于同一行，我想您可以使用

使消息显示在其下方，尽管我可能会在一行中设置输入组，并使用列将其居中，而不是使用对齐标记，然后将消息放入同一列下的新

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

150，：占位符=>“输入城市或邮政编码”）%>
搜寻

引导程序3具有输入组。。。这些都很好

在你的代码中试试这个

<%= form_tag location_search_path, method: 'get' do %>
  <%= text_field_tag :location, params[:location], size: 150, placeholder: "Enter city or zip code" %>
  <span class='input-group-btn'>
    <%= submit_tag 'Search', class: 'btn btn-success' %>
  </span>
<% end %>

您能告诉我如何使用和安装的更多说明吗？我对Bootstrap真的是个新手。谢谢最基本的解释是一行有12列宽。您可以在行中嵌套列，声明它有多少列宽。如果你把页面一分为二，你会有一组行标记，其中一列是“6”，另一列是“6”。这确实是Bootstrap布局中的一个重要原则，超出了本文的讨论范围。如果你还没有看，你就得看。如果你对2.3没有太多了解，也可以切换到3.0，因为以后升级非常困难。谢谢你的建议。我将切换到3.0。