Kendo UI Bootstrap主题与Bootstrap 3.1.0不兼容

Question

我刚刚将基于Bootstrap 2.3的站点转换为3.1,而且我对Kendo的Bootstrap主题有很多问题.

我倾向于在自定义网格弹出编辑器中使用Bootstrap表单组,但它们与Kendo的CSS不兼容.

我设置了一个小提琴来显示问题.正如您在编辑记录时所看到的那样,标签的大小和位置以及输入和输出方式.

这与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元素(如寻呼机)会受到不利影响.

有没有办法解决这个问题,或者这不是Telerik打算如何使用它的框架？

Answer 1

我最终使用下面的CSS样式让Bootstrap元素看起来正好在Kendo元素中.我们特别难以获得.row(和列类)在Kendo Windows中工作,但是这个CSS修复了我们的问题.

.k-widget select, .k-widget textarea, .k-widget input[type="text"]:not(.k-input), .k-widget input[type="password"], .k-widget input[type="datetime"], .k-widget input[type="datetime-local"], .k-widget input[type="date"], .k-widget input[type="month"], .k-widget input[type="time"], .k-widget input[type="week"], .k-widget input[type="number"], .k-widget input[type="email"], .k-widget input[type="url"], .k-widget input[type="search"], .k-widget input[type="tel"], .k-widget input[type="color"], .k-widget .uneditable-input {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}

.k-window .row, .k-window .row *:not(.k-widget):not(.k-animation-container), .k-widget .row *:before:not(.k-widget) { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

.k-widget .col-lg-1, .k-widget .col-lg-2, .k-widget .col-lg-3, .k-widget .col-lg-4, .k-widget .col-lg-5, .k-widget .col-lg-6, .k-widget .col-lg-7, .k-widget .col-lg-8, .k-widget .col-lg-9, .k-widget .col-lg-10, .k-widget .col-lg-11, .k-widget .col-lg-12, .k-widget .col-md-1, .k-widget .col-md-2, .k-widget .col-md-3, .k-widget .col-md-4, .k-widget .col-md-5, .k-widget .col-md-6, .k-widget .col-md-7, .k-widget .col-md-8, .k-widget .col-md-9, .k-widget .col-md-10, .k-widget .col-md-11, .k-widget .col-md-12, .k-widget .col-sm-1, .k-widget .col-sm-2, .k-widget .col-sm-3, .k-widget .col-sm-4, .k-widget .col-sm-5, .k-widget .col-sm-6, .k-widget .col-sm-7, .k-widget .col-sm-8, .k-widget .col-sm-9, .k-widget .col-sm-10, .k-widget .col-sm-11, .k-widget .col-sm-12, .k-widget .col-xs-1, .k-widget .col-xs-2, .k-widget .col-xs-3, .k-widget .col-xs-4, .k-widget .col-xs-5, .k-widget .col-xs-6, .k-widget .col-xs-7, .k-widget .col-xs-8, .k-widget .col-xs-9, .k-widget .col-xs-10, .k-widget .col-xs-11, .k-widget .col-xs-12
{
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}

Answer 2

来自Kendo文档:

Kendo UI使用默认的内容框模型(box-sizing CSS属性),而Bootstrap使用非默认的bordex-box模型并将其应用于页面上的所有元素,包括与Bootstrap无关的元素.......一个可能的简单解决方法是覆盖Bootstrap CSS,将内容框模型应用于页面上的所有元素,并仅使用边框框模型选择需要它的Bootstrap元素(这些都是.col -... classes,.row,.container和.container-fluid).您可以在Bootstrap和Kendo UI样式表之后添加以下CSS规则.

请参阅示例css解决方案的参考:http: //docs.telerik.com/kendo-ui/getting-started/using-kendo-with/using-kendo-with-twitter-bootstrap#nesting-kendo-ui-widgets-and -bootstrap网格布局

Answer 3

我通过添加这些 css 行解决了这个问题...：

.k-animation-container, .k-widget, .k-widget *, .k-animation-container *, .k-widget *:before, .k-animation-container *:after, .k-block .k-header, .k-list-container {
    box-sizing: inherit;
}
.k-block > .k-header, .k-window-titlebar {
    height:auto;
}