使用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

<div class="new">
    <form>
        <div class="new-two"><label>Label name</label><br>
        <input type="text" placeholder="Type something…"></div>
        <div class="new-one"><label>Label name</label><br>
        <input type="text" placeholder="Type something…"></div>
    </form>
</div>

CSS：

.new-one {
    position: relative;
    display: inline-block;
    margin-left: 300px;
}

.new-two {
    position: absolute;
    margin-left:40px;
}

.new {
    background-color: lightgrey;
    padding: 20px;
 }

小提琴：http://jsfiddle.net/7V3F7/

Answer 2

您需要使用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>