asp.net-mvc - 如何让 kendoAutoComplete 与引导类 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

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

设置剑道自动完成宽度