如何让kendoAutoComplete与bootstrap类col-md一起使用

Question

我有一个Kendo AutoComplete控件，我添加了kendo.common-bootstrap.css引用，这些引用使其大小合适，但它不能与col-md-10或任何具有自动完成功能的类一起使用。

这是现在看起来像的屏幕截图，

以下是我试图让它看起来的方式

我尝试添加一些css来让它看起来我希望它看起来但它没有用。 这是我尝试使用的css

    <style>
    .max-size {
        max-width: 100%;
    }
</style>

这是控件本身

    <div class="form-group">
    <label for="acCountries" class="control-label col-md-2" id="lblAdministrationManufacturerCountry"><b>Country</b></label>
    <div class="col-md-10">
        <input id="acCountries" type="text" class="form-control max-size" name="country" />
    </div>
</div>

修改 这是我用来填充自动完成和控件本身的代码......

    function ShowCountries(countryData) {
    $("#acCountries").kendoAutoComplete({
        dataSource: countryData,
        dataTextField: "dictionaryName",
        dataValueField: "dictionaryItemID",
        animation: false
    });
}

function GetCountriesForAutoComplete() {
    $.ajax({
        type: "GET",
        url: AddURLParam.GetCountriesForAutoComplete + "?id=" + 21,
        contentType: "application/json; charset=utf-8",
        success: function (data, textStatus, jqXHR) {
            ShowCountries(data);
        }
    })
}

Answer 1

我找到了我的问题的解决方案，可以在此链接找到解决方案

Setting Kendo AutoComplete width