如何在 jquery ajax bootstrap 3 中对齐 div

Question

Here is my jquery code,

   content = "<div class='row'>";
                             content += "<div class='col-md-5'><span class='text-success'>name:</span> " + data.FullName + "</div>";
                             content += "<div class='col-md-3'><span class='text-success'>mobile</span>  " + data.Mobile + "</div>";

                             content += "<div class='col-md-3'><span class='text-success'>department:</span>  <select id='options'  class='form-control' ></select></div>";
                             content += "";

                             content += "</div>";
$('#details').html(content);

i am appending and than displaying in view is working fine but issue is mobile and name is coming right after label but select is going under label department.

i searched found solution that by using form-inline it will work but i can not use this class in div i already tried.

Hopes for your suggestions

thanks

Answer 1

Since you are using row class, each horizontal line represents a total of 12 sections ("col-md-12"). Now when you type "col-md-5", it means that you only use 5 out of 12 sections. Thus, the next 'div' is in the same line next to the previous 'div' is occupying 3 sections ("col-md-3"). There are 2 ways, to my knowledge, to make it written in the next line.

Method 1: (Make them to 12 sections)

content = "<div class='row'>";
    content += "<div class='col-md-12'><span class='text-success'>name:</span> " + data.FullName + "</div>";
    content += "<div class='col-md-12'><span class='text-success'>mobile</span>  " + data.Mobile + "</div>";
    content += "<div class='col-md-3'><span class='text-success'>department:</span>  <select id='options'  class='form-control' ></select></div>";
    content += "";
    content += "</div>";
$('#details').html(content);

Method 2: (Occupy the empty section with empty an 'div')

content = "<div class='row'>";
    content += "<div class='col-md-5'><span class='text-success'>name:</span> " + data.FullName + "</div>";
    content += "<div class='col-md-7'></div>";
    content += "<div class='col-md-3'><span class='text-success'>mobile</span>  " + data.Mobile + "</div>";
    content += "<div class='col-md-9'></div>";
    content += "<div class='col-md-3'><span class='text-success'>department:</span>  <select id='options'  class='form-control' ></select></div>";
    content += "";
    content += "</div>";
$('#details').html(content);