css - 在 Rails 中使用引导程序并排设置表单字段

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>

Answer 2

<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;
 }

Fiddle:http://jsfiddle.net/7V3F7/