Kendo UI Bootstrap主题与Bootstrap 3.1.0不兼容

我只是在将基于Bootstrap 2.3的网站转换为3.1的过程中，并且我有许多Kendo Bootstrap主题的问题。Kendo UI Bootstrap主题与Bootstrap 3.1.0不兼容

我倾向于在自定义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); 
}

如果删除这些系统初始化的形式看起来是正确的，但一定剑道元素（如寻呼机）受到不利影响。

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

来源

2014-02-07 Mat

我加入的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; 
}

来源

2014-05-12 03:44:28 Dragouf

从剑道文档：

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

来源

2014-06-03 23:03:21 sham

我很喜欢Kendo试图通过调用'content-box'框来调整“默认”模型的情况。虽然它可能是默认的，但因为它是老式的模型，所以与'border-box'相比，它既不是最好也不容易使用。 Bootstrap通过使用更新，更好的模型做出了很大的举动，并希望将每个人都推向“边框”模型，而不是像Kendo所做的那样找借口。 –

剑道来自链接页面的建议修复对我非常有帮助。我不知道为什么我很惊讶，但是，是的。谢谢你的提示。 – kenchilada

@JohnWasham这是一个短视的声明。不久之前，每个人都把'border-box'模型称为** Internet Explorer盒模型bug **。每个人都认为'内容盒'模型是一场大师赛。 'border-box'模型在'content-box'之前被广泛使用。 – surfasb

这显然是与事实引导和剑道依赖于不同的盒子模型和制作元素依靠box-sizing: border-box混杂与那些依靠的困难做在box-sizing: content-box。

一般而言，剑道的所有款式均基于标准content-box型号。但是，Bootstrap的所有样式都依赖于易于使用的border-box模型。两者之间最大的区别是如何处理填充，边框等。在content-box他们是一个元素的宽度的一部分，他们不是border-box。

Bootstrap假设当然你想用border-box，为什么你不会！它有助于设置页面上的所有内容使用border-box，包括Kendo小部件。对于它的一部分，Kendo知道Bootstrap可能会将所有设置都设置为border-box，因此它将所有内容都设置为content-box，用于Kendo小部件和所有子项。所以现在如果你嵌入任何与任何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小部件的内部，你知道会有Bootstrap内容。

来源

2014-06-27 18:13:09 daveaglick

我结束了使用下面的CSS样式来获取Bootstrap元素在Kendo元素里面。我们在使用Kendo Windows时特别遇到.row（和列类）的问题，但是这个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; 
}

来源

2014-07-28 16:37:42

Kendo UI Bootstrap主题与Bootstrap 3.1.0不兼容

回答

相关问题