Kendo UI Bootstrap 主题无法与 Bootstrap 3.1.0 配合使用答案

【问题标题】：Kendo UI Bootstrap theme not working well with Bootstrap 3.1.0Kendo UI Bootstrap 主题无法与 Bootstrap 3.1.0 配合使用
【发布时间】：2014-03-04 17:58:06
【问题描述】：

我正在将基于 Bootstrap 2.3 的网站转换为 3.1 的过程中，我遇到了很多关于 Kendo 的 Bootstrap 主题的问题。

我倾向于在自定义 Grid 弹出式编辑器中使用 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 元素（例如寻呼机）会受到不利影响。

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

【问题讨论】：

标签： twitter-bootstrap kendo-ui kendo-grid

【解决方案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;
}

【讨论】：

【解决方案2】：

来自 Kendo 文档：

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

请参阅示例 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

【讨论】：

我喜欢 Kendo 尝试通过调用 content-box 调整“默认”模型大小的框来扭转局面的方式。虽然它可能是默认的，仅仅因为它是老式模型，与border-box 相比，它既不是最好的也不是易于使用。 Bootstrap 通过使用更新、更好的模型取得了巨大的进步，并希望将每个人都推向 border-box 模型，而不是像 Kendo 那样找借口。
Kendo 从链接页面建议的修复对我来说非常有用。我不知道为什么我很惊讶，但是，是的。感谢您的提示。
@JohnWasham 这是一个短视的声明。不久前，每个人都将border-box 模型称为Internet Explorer 框模型错误。每个人都认为content-box 模型是大师赛。 border-box 模型在 content-box 之前被广泛使用。
@surfasb，你写的是真的，但我不确定它与我写的有什么冲突。关键是 Telerik 不应该认为 content-box 是最佳选择，仅仅因为它是“默认值”。

【解决方案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;
}

【讨论】：

【解决方案4】：

这肯定与 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 相关的东西，你会得到错误的盒子模型。真是一团糟。

我尝试了许多不同的技巧来尝试缓解这种情况，但事实是没有好的方法可以解决它。这是迄今为止我发现效果最好的 CSS 代码（它使用 CSS 属性选择器，因此不适合旧版浏览器）：

.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 小部件内的元素上。

【讨论】：