表格输入在同一行

Question

我试图制作一个有输入的简单表格，每个输入都在col-md-6中，我希望每两个输入彼此相邻，然后在底部我有一个类型的输入文件和上传的文件（我希望它在这里是一个图像），应该出现在左侧最后两个输入旁边的正方形中，这是我试图实现的图像：，这是我的代码：

＆＃13;

＆＃13;

$(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);
};

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用2个行元素＆lt; div class =“row”＆gt;

第一个环绕前4个输入，第二个环绕剩余的3个输入。