2016-08-22 7 views
2

Ich habe eine Bootstrap-Form mit mehreren horizontalen und vertikalen Elementen zu schaffen versucht, konnte aber nicht bekommen, was ich wollteErstellen vertikale Formularelemente innerhalb eines Inline-Form in Bootstrap 3.3.6

Anforderung

  • Haupt <form> enthält vertikale <formfield> Elemente

  • <formfield> Element enthalten alle Elemente horizontal

  • <formfield> Element hat ein <div> Element, das einige vertikale Elemente im Inneren enthalten

ich ohne Problem ersten beiden Anforderungen erfüllt haben, aber ich bin ratlos, wenn es requirement.I've versucht dauern kommt Suchen auf Google und stakoverflow, aber noch kein Glück.

benötigt Form enter image description here

Form Ich bin immer gerade jetzt enter image description here

My-Code

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

Jeder Vorschlag für die richtige Richtung wird sehr geschätzt.

Antwort

1

Dies sollte helfen. Es zeigt nicht wirklich auf jsfiddle, aber versuchen Sie, das HTML zu kopieren und lokal zu laufen.

<!-- 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

Sie könnten ein paar frechen Schwimmer verwenden und dann die Schnipsel in eine Reihe stellen und sie auf den max col .. Ich bin nicht sicher, ob Floats mit ist die beste Idee, wie Sie einige seltsamen Ränder Fälle bekommen prob, sondern was die Heu.

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

Click jsfiddle link above for example

Verwandte Themen