在同一行輸入表格

Question

我試圖做一個簡單的表單，它有輸入，每個輸入都是在col-md-6中，我希望每個輸入都相鄰，然後在底部有一個輸入文件類型和上傳的文件（我希望它是一個圖像），應該出現在左邊最後兩個輸入旁邊的一個正方形中，這裏是我試圖實現的圖像：，這裏是我的代碼：

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

可以解決使用2個元素< DIV類= 「行」>

第一個環繞前4個輸入，第二個環繞其餘3個。