Kendo UI Bootstrap 主题不适用于 Bootstrap 3.1.0

结果，我使用了以下样式 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;

}

来自文件kendo：

肯娜 UI 使用内容标准框模型框 /盒式校准 CSS
财产/, 尽管 Bootstrap 使用自定义模型 bordex-box 和
将其应用于页面上的所有元素，包括那些
与S.无关 Bootstrap.
......
可能的简单绕过是
覆盖 Bootstrap CSS, 应用模型 content-box box 对所有人来说
页面上的元素和使用模型 border-box box 只有所选项目。
Bootstrap 需要它的元素 /一切都。 col-... 班级
.row, .container 和。集装箱液体/. 您可以添加以下内容 CSS
规则之后 Bootstrap 和 Kendo UI 风格表。

请参阅样品解决方案 css:
http://docs.telerik.com/kendo- ... ayout

我通过添加这些行来解决了这个问题 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;

}

这绝对是由于这一事实 Bootstrap 和 Kendo 依靠不同的盒子和困难创造依赖的元素

box-sizing: border-box

, 与那些依赖的人混合

box-sizing: content-box

.

一般来说，KENDO的整个风格基于标准模型。

content-box

. 但是，整个风格 Bootstrap 依靠更简单的使用模型

border-box

. 它们之间的最大区别在于处理缩进，边界等。

content-box

它们是元素宽度的一部分

border-box

-不是。

Bootstrap 当然假设你 , 想要使用

border-box

, 你为什么不这样做！ 他很有帮助

一页

用来

border-box

, 包括小部件 Kendo. 从我身边， Kendo 知道什么 Bootstrap 可以安装一切才能使用

border-box

, 所以他让一切都恢复了

content-box

对于小部件 Kendo 和

他们所有的子公司

元素 . 所以现在，如果你把一些相关的东西 Bootstrap, 在与之相关的任何事情 Kendo, 您将获得一个不正确的框模型。 这是一个完整的Bardak。

我尝试了一堆不同的黑客试图柔化它，但事实是解决这个问题没有好方法。 这个代码 CSS, 正如我所发现的那样，这是到目前为止的工作 /他使用属性选择器 CSS, 那是什么 no-go 对于旧浏览器/:

.border-box, .border-box * {

 -webkit-box-sizing: border-box;

 -moz-box-sizing: border-box;

 box-sizing: border-box;



 [class^="k-"] {

 -webkit-box-sizing: content-box;

 -moz-box-sizing: content-box;

 box-sizing: content-box;

 }

}

然后你安装

class='border-box'

在任何可以投资小部件的元素 Kendo, 如您所知，哪些将具有可引导内容。