Formulareingaben in der gleichen Zeile

Question

Ich versuche, eine einfache Form zu machen, die Eingänge hat und jeder Eingang ist in Col-MD-6, ich möchte, dass jeder zwei Eingang nebeneinander zu sein, dann an der Unterseite habe ich ein Eingabe von Typ-Datei und die hochgeladene Datei (ich möchte es ein Bild hier), sollte in einem Quadrat neben den letzten beiden Eingaben auf der linken Seite erscheinen, hier ist ein Bild von dem was ich erreichen will: , und hier ist mein Code :

$(function() { 
 
    $(":file").change(function() { 
 
     if (this.files && this.files[0]) { 
 
      var reader = new FileReader(); 
 
      reader.onload = imageIsLoaded; 
 
      reader.readAsDataURL(this.files[0]); 
 
     } 
 
    }); 
 
}); 
 

 
function imageIsLoaded(e) { 
 
    $('#ImgUpload').attr('src', e.target.result); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
    <div class="col-xs-12"> 
 
        <form> 
 
        <h4>Personal Details</h4> 
 
        <hr> 
 
        <div class="row"> 
 
        <div class="form-group col-md-6 col-xs-12"> 
 
        <label>Input</label> 
 
        <input type="text" class="form-control"> 
 
        </div> 
 
        <div class="form-group col-md-6 col-xs-12"> 
 
        <label>Input</label> 
 
        <input type="text" class="form-control"> 
 
        </div> 
 
        <div class="form-group col-md-6 col-xs-12"> 
 
        <label>Input</label> 
 
        <input type="text" class="form-control"> 
 
        </div> 
 
        <div class="form-group col-md-6 col-xs-12"> 
 
        <img id="ImgUpload" src="#"/> 
 
        </div> 
 
        <div class="form-group col-md-6 col-xs-12"> 
 
        <label>Image</label> 
 
        <input type="file" class="form-control"> 
 
        </div> 
 
        <div class="form-group col-md-6 col-xs-12"> 
 
        <label>Input</label> 
 
        <input type="text" class="form-control"> 
 
        </div> 
 
       </div> 
 
      </form>

Answer 1

können Sie mit zwei Zeilenelemente < div class = "Zeile" lösen>

Die erste umgibt die ersten 4 Eingänge und die zweite umgibt die restlichen 3.