Bootstrap-Thema funktioniert nicht durch Skript

Question

Ich versuche, den Ländercode von unserer API abzurufen.

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

Ich bin immer die Ergebnisse. aber das Problem ist, dass der Bootstrap nicht an dem select-Element arbeitet, da es in der alten HTML-Form angezeigt wird.

Wie kann ich es so einrichten, dass es in Bootstrap-Manier angezeigt wird und auch, wie die Breite von Select-Element verringert wird?

Answer 1

Fügen Sie die form-control Klasse zum Ländercode div hinzu. Das sollte es richtig formatieren. Sie können die Bootstrap-Form docs hier Kasse: http://getbootstrap.com/css/#forms

die Breite zu ändern, können Sie die Anzahl der Spalten, um es in der Klasse zugeordnet ändern können, wie col-sm-6-col-sm-4 ändern.

Jedes Mal, wenn Sie eine verschachtelte Spalte hinzufügen, sollte sie sich in einer neuen Zeile befinden. Versuchen Sie, die row Klasse zu Ihrem äußeren div

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