如何自動將字段放在彼此相鄰的用戶CSS引導v3.2.0

Question

我已經在我的應用程序中創建了一個將允許我在頁面上創建動態字段的未來。我需要做的是每次都以相同的方式顯示這些字段。

我希望能夠在下顯示多達2場相互「如果有的話」 我重視我需要什麼最終顯示的樣子

從下面的圖像截圖字段「不再是員工」是一個標籤，在其右側有一個值「NULL」。在它的最右側還有一個名爲「Outside Sales Primary Contact」的字段，其值爲「NULL」。

所以我想顯示字段到2列，如果有足夠的字段，其他明智的把一個在左邊，沒有在右邊。

不是我不需要如何生成該字段的幫助。我需要關於CSS和bootstrap的幫助，瞭解如何顯示彼此相鄰的列。

Answer 1

我可能需要一些更詳細的信息來澄清你的問題，但我給你一個我認爲你正在尋找的演示代碼。

DEMO - http://codepen.io/BooststrapBay/pen/DGzIu

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6 example-form"> 
     <ul> 
     <li> 
      <span>No longer an employee</span> 
      <input class="form-control" type="text"> 
     </li> 
     <li> 
      <span>Support level</span> 
      <input class="form-control" type="text"> 
     </li> 
     <li> 
      <span>Previous role</span> 
      <input class="form-control" type="text"> 
     </li> 
     <li> 
      <span>Attitude</span> 
      <input class="form-control" type="text"> 
     </li> 
     <li> 
      <span>Attitude detail</span> 
      <input class="form-control" type="text"> 
     </li> 
     </ul> 
    </div> 
    <div class="col-md-6 example-form"> 
     <ul> 
     <li> 
      <span>Outside sales primary contact</span> 
      <input class="form-control" type="text"> 
     </li> 
     <li> 
      <span>Training primary contact</span> 
      <input class="form-control" type="text"> 
     </li> 
     <li> 
      <span>Primary enrollment contact</span> 
      <input class="form-control" type="text"> 
     </li> 
     <li> 
      <span>Birth month</span> 
      <input class="form-control" type="text"> 
     </li> 
     <li> 
      <span>Birth day</span> 
      <input class="form-control" type="text"> 
     </li> 
     </ul> 
    </div> 
    </div> 
</div>