我倾向于在自定义网格弹出式编辑器中使用Bootstrap表单组,但它们不符合Kendo的CSS.
我设置了一个Fiddle来显示问题.正如您可以在编辑记录时看到的那样,标签的大小和位置以及输入和输出方式.
这与common-template.less文件中的最后两个条目有关：
.k-animation-container,.k-widget,.k-widget *,.k-animation-container *,.k-widget *:before,.k-animation-container *:after
{
.Box-sizing(content-Box);
}
.k-button,.k-textBox,.k-autocomplete,div.k-window-content,.k-tabstrip > .k-content > .km-scroll-container,.k-block,.k-edit-cell .k-widget,.k-grid-edit-row .k-widget,.k-grid-edit-row .text-Box,.km-actionsheet > li,.km-shim
{
.Box-sizing(border-Box);
}
如果删除这些Bootstrap表单看起来正确,但某些Kendo元素(如寻呼机)受到不利影响.
解决方法
Kendo UI uses the default content-Box Box model (Box-sizing CSS
property),while Bootstrap uses the non-default bordex-Box model and
applies it to all elements on the page,including ones that are
unrelated to Bootstrap.
……
A possible easy workaround is to
override the Bootstrap CSS,apply content-Box Box model to all
elements on the page and use a border-Box Box model only to selected
Bootstrap elements,which need it (these are all .col-… classes,
.row,.container and .container-fluid). You can add the following CSS
rules after the Bootstrap and Kendo UI stylesheets.
参考样本css解决方案：
http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/using-kendo-with-twitter-bootstrap#nesting-kendo-ui-widgets-and-bootstrap-grid-layout