在軌道中使用引導程序並排設置窗體字段

Question

我有一個軌道應用程序，我希望窗體字段並排而不是下面。我能做的最好的是使用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

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