如何在 jquery ajax bootstrap 3 中對齊 div

Question

這是我的 jquery 代碼，

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

我正在附加，而不是在視圖中顯示工作正常，但問題是移動的，名稱緊隨 label 之后，但 select 屬於 label 部門。

我搜索找到的解決方案，通過使用 form-inline 它可以工作，但我不能在我已經嘗試過的 div 中使用這個 class。

希望您的建議

謝謝

Answer 1

由於您使用的是行 class，因此每條水平線總共代表 12 個部分（“col-md-12”）。 現在，當您鍵入“col-md-5”時，這意味着您只使用了 12 個部分中的 5 個。 因此，下一個 'div' 位於前一個 'div' 旁邊的同一行中，占據 3 個部分（“col-md-3”）。 據我所知，有兩種方法可以讓它寫在下一行。

方法一：（做成12段）

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

方法2：（用空的'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);