Bootstrap主题不通过脚本工作

Question

我正在尝试从API中检索国家/地区代码。

<?php
$year = date("Y");
$month = date("m");
for ($i=0; $i<=12; $i++)
{
    $month--;
    if ($month < 1) { $month = 12; $year--; }
    echo '<option value="'.date('Y-m-d', strtotime($year."-".$month."-01")).'">'.date('Y-m', strtotime($year."-".$month."-01")).'</option>';
}

$(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;
        }
    });
});

我收到了结果。但问题是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类添加到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>