Bootstrap主題不通過腳本工作

Question

我想從我們的API檢索國家代碼。

$(document).ready(function() { 
    $.ajax({ 
     url: "http://api.ourapi", 
     dataType: "json", 
     success: function(countries) { 
      var selectHTML = ""; 
      selectHTML="<select>"; 
      for(i = 0; i < countries.length; i = i + 1) { 
       country = countries[i]; 
       selectHTML += "<option value=" + country.countryCode + ">" + country.countryName + "(" + country.countryPrefix +")</option>"; 
      } 
      selectHTML += "</select>"; 
      document.getElementById("countrycode").innerHTML = selectHTML; 
     } 
    }); 
}); 

 

<td> 
    <div class="form-group"> 
      <label class="control-label" for="countrycode"></label> 
      <div id="countrycode" class="col-sm-6 col-md-12"></div>       
    </div> 
</td> 

我得到的結果。但問題是Bootstrap不能在select元素上工作，因爲它以舊的html格式顯示。

我怎樣才能讓它以自舉的方式顯示，以及如何減少選擇元素的寬度？

Answer 1

將form-control類添加到countrycode div。這應該正確格式化。您可以在此檢出自舉表單文檔：http://getbootstrap.com/css/#forms

要更改寬度，您可以更改分配給該類的列數，例如將col-sm-6更改爲col-sm-4。

每次添加嵌套col時，它都應位於新行內。嘗試添加row類的外div

<div class="form-group row"> 
    <label for="countrycode"></label> 
    <div id="countrycode" class="form-control col-sm-4"></div> 
</div>