Question

我正在将基于Bootstrap 2.3的网站转换为3.1，而且我在Kendo的Bootstrap主题方面遇到了很多问题。

我倾向于在自定义网格弹出编辑器中使用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打算如何使用它的框架？

Answer 1

来自Kendo docs：

Kendo UI使用默认的内容框框模型（框大小调整CSS）属性），而Bootstrap使用非默认的bordex-box模型和将其应用于页面上的所有元素，包括那些元素与Bootstrap无关。 ...... 一个可能的简单解决方法是覆盖Bootstrap CSS，将内容框框模型应用于所有页面上的元素并仅使用边框框模型进行选择 Bootstrap元素，需要它（这些都是.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

Answer 2

我最终使用下面的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 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;
}

Answer 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小部件和所有孩子。所以现在如果你嵌套任何与Bootndo相关的内容，剑道相关的你将得到错误的盒子模型。这真是一团糟。

我尝试过一系列不同的黑客试图减轻这种情况，但事实上并没有好办法解决这个问题。这是我发现到目前为止效果最好的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;
    }
}

然后在任何可能嵌套在Kendo小部件内的元素上设置class='border-box'，你知道它将具有Bootstrap内容。

Kendo UI Bootstrap主题与Bootstrap 3.1.0不兼容

4 个答案: