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

Posted 2023-05-07

【中文标题】Kendo UI Bootstrap 主题无法与 Bootstrap 3.1.0 配合使用

【英文标题】：Kendo UI Bootstrap theme not working well with 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 打算如何使用其框架的方式？

【参考方案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 小部件内的元素上。