2016-08-22 116 views
2

我一直在努力創建具有多個水平和垂直元素引導的形式,但不能得到我想要的東西創建一個在線表格內垂直表單元素3.3.6

要求

  • 主要<form>包含垂直<formfield>元件

  • <formfield>元件包含的所有元素水平

  • <formfield>元素具有包含在它裏面的一些豎向構件一個<div>元素

我已經完成了前兩項要求,沒有任何問題,但我無言以對,當涉及到持續requirement.I've嘗試搜索谷歌和stakoverflow但沒有運氣呢。

所需形式 enter image description here

表我得到現在 enter image description here

我的代碼

<form id="grn_items_form"> 
 
    <div class="form-inline"> 
 
    <fieldset id="1" class="grn_item_fieldset "> 
 
     <div class="form-group"> 
 
     <button class="form-control" id="1" class="remove_product" type="button"> 
 
      <i class="fa fa-trash"></i> 
 
     </button> 
 
     </div> 
 
     <div class="form-group"> 
 
     <input class="form-control" id="1" type="text" placeholder="Variation"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <input class="form-control" id="1" type="text" placeholder="Unit Price"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <input class="form-control" id="1" class="quantity" type="text" disabled=""> 
 
     </div> 
 
     <div class="form-group"> 
 
     <button class="form-control" id="1" class="add_serial" type="button">Add Serials</button> 
 
     </div> 
 
     <div class="row "> 
 
     <div class="form-group"> 
 
      <input class="form-control" type="text" name="mytext[]" placeholder="Serial Here"> 
 
      <a class="form-control remove_field" href="#"> 
 
      <i class="fa fa-close"></i> 
 
      </a> 
 
     </div> 
 
     <div class="form-group"> 
 
      <input class="form-control" type="text" name="mytext[]" placeholder="Serial Here"> 
 
      <a class="form-control remove_field" href="#"> 
 
      <i class="fa fa-close"></i> 
 
      </a> 
 
     </div> 
 
     <div class="form-group"> 
 
      <input class="form-control" type="text" name="mytext[]" placeholder="Serial Here"> 
 
      <a class="form-control remove_field" href="#"> 
 
      <i class="fa fa-close"></i> 
 
      </a> 
 
     </div> 
 
     </div> 
 
    </fieldset> 
 
    </div> 
 
    <div class="form-inline"> 
 
    <fieldset id="2" class="grn_item_fieldset"> 
 
     <div class="form-group"> 
 
     <button class="form-control" id="2" class="remove_product" type="button"> 
 
      <i class="fa fa-trash"></i> 
 
     </button> 
 
     </div> 
 
     <div class="form-group"> 
 
     <input class="form-control" id="2" type="text" placeholder="Variation"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <input class="form-control" id="2" type="text" placeholder="Unit Price"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <input class="form-control quantity" id="2" type="text" placeholder="Quantity"> 
 
     </div> 
 
    </fieldset> 
 
    </div> 
 
</form>

任何有關正確方向的建議都非常感謝。

回答

1

這應該幫助。它實際上並沒有顯示在jsfiddle上,但嘗試複製HTML並運行本地。

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div class="container"> 
 
\t <form> 
 
\t \t <div class="row" id="row1"> 
 
\t \t \t <fieldset> 
 
\t \t \t \t <div class="row" id="main"> 
 
\t \t \t \t \t <div class="col-md-1"> 
 
\t \t \t \t \t \t <button class="form-control" id="1" class="remove_product" type="button"> 
 
\t \t \t \t \t \t \t <i class="fa fa-trash"></i> 
 
\t \t \t \t \t \t </button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t <input type="text" class="form-control" placeholder="Variation"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t <input type="text" class="form-control" placeholder="Unit Price"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-md-2"></div> 
 
\t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t <button class="form-control" id="1" class="add_serial" type="button"> 
 
\t \t \t \t \t \t \t Add Serials 
 
\t \t \t \t \t \t </button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t <div class="col-md-10"> 
 
\t \t \t \t \t \t \t <input class="form-control " type="text" name="mytext[]" placeholder="Serial Here"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col-md-1"> 
 
\t \t \t \t \t \t \t <a class="form-control remove_field" href="#"> D </a> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="row" id="sub1"> 
 
\t \t \t \t \t <div class="col-md-3 pull-right"> 
 
\t \t \t \t \t \t <div class="col-md-10"> 
 
\t \t \t \t \t \t \t <input class="form-control " type="text" name="mytext[]" placeholder="Serial Here"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col-md-1"> 
 
\t \t \t \t \t \t \t <a class="form-control remove_field" href="#"> D </a> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="row" id="sub1"> 
 
\t \t \t \t \t <div class="col-md-3 pull-right"> 
 
\t \t \t \t \t \t <div class="col-md-10"> 
 
\t \t \t \t \t \t \t <input class="form-control " type="text" name="mytext[]" placeholder="Serial Here"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="col-md-1"> 
 
\t \t \t \t \t \t \t <a class="form-control remove_field" href="#"> D </a> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </fieldset> 
 
\t \t </div> 
 
\t </form> 
 
</div>

0

你可以使用一些厚臉皮的漂浮物,然後把這些片段放到一行中,然後將它們加到最大值.. 我不確定使用漂浮物是否是最好的想法,因爲你會得到一些奇怪的邊緣情況,但是什麼乾草。

https://jsfiddle.net/wxjas2np/3/

Click jsfiddle link above for example