css - 使用 rails 中的 Bootstrap 并排设置表单字段

Question

我有一个 Rails 应用程序，我希望表单字段并排放置，而不是在下方。我能做的最好的事情就是使用 form-inline 将它们并排放置，但标签会向左对齐。标签应该在顶部。我还想知道如何将表单域的大小恰好保持一半。我的代码是:

<div class="container">
  <%= form_for '#' do |f|%>
    <div class= "hero-unit">

        <%=f.label "First Name"%>
        <%=f.text_field '#', :class=>"span5" %>

        <%=f.label "Last Name" %>
        <%=f.text_field '#', :class=>"span5" %>
           </div>
   <% end %>
</div>

这导致:但我需要的是:

请帮助。

Answer 1

您需要使用 Bootstrap Grid System为了实现你想要的。 Bootstrap 有一个网格，分为 12 列。输入可以在同一行中嵌套、堆叠、偏移等。您可以使用“行”类创建水平列，并为跨越内容的列预定义网格类。

在您的情况下，您需要一行包含两个网格列，例如:

<div class="container">
  <%= form_for '#' do |f|%>
    <div class="hero-unit">

      <div class="row">
        <div class="col-md6">
          <%=f.label "First Name"%>
          <%=f.text_field '#' %>
        </div>

        <div class="col-md6">
          <%=f.label "Last Name" %>
          <%=f.text_field '#' %>
        </div>
      </div>

    </div>
  <% end %>
</div>