Kendo UI样式破坏了表单控件的布局

Question

我正在尝试使用简单的引导行/列布局构建表单。在添加Kendo类样式之前，控件按预期方式堆叠：

<div class="col-lg-3 form-group">
    <label for="CaseName" class="form-label">Name</label>
    <input type="text" class="form-control-sm" />
</div>

一旦我添加了Kendo类用于样式化，布局就会变为水平：

<div class="col-lg-3 form-group">
    <label for="CaseName" class="form-label">Name</label>
    <input type="text" class="form-control k-textbox" />
</div>

任何人都知道如何重写k-textbox类中发生的一切吗？

谢谢。

Answer 1

根据Kens on Bootstrap指南：Using form-control Bootstrap CSS Class，我们必须使用自定义样式来确保form-label和form-control的行为符合预期：

<style>
    .form-control.k-widget
    {
        padding: 0;
        width: 100%;
        height: auto;
    }

    .form-control.k-widget:not(.k-autocomplete)
    {
        border-width: 0;
    }
</style>