Question

我正在开发网络应用程序的前端。我想知道如何使按钮和文本字段排成一行。另一个问题是如何使错误信息显示在文本字段的正下方？图片： 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 %>

Answer 2

bootstrap 3有输入组...这很好。 http://getbootstrap.com/components/#input-groups

在您的代码中尝试此操作...

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

Rails＆amp; Bootstrap使按钮与文本字段内联

2 个答案: