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

您可以通过将您的 selectHTML 行更改为下面的行来做到这一点。

selectHTML="<select class='form-control'>";

为了使其正确对齐，对 div#countrycode 进行以下更改

<div id="countrycode" class="pull-left" style="width:100%;" ></div>

Answer 2

将 form-control 类添加到国家代码 div。那应该正确格式化它。您可以在此处查看引导表单文档：http://getbootstrap.com/css/#forms

要更改宽度，可以更改类中分配给它的列数，例如将col-sm-6更改为col-sm-4。

每次添加嵌套列时，它都应该在新行中。尝试将row 类添加到您的外部div

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