twitter-bootstrap – Kendo UI Bootstrap主题与Bootstrap 3.1.0不兼容

我正在将基于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打算为其框架使用的方法吗?

从Kendo文件:

Kendo UI uses the default content-box box model (box-sizing CSS
property), while Bootstrap uses the non-default bordex-box model and
applies it to all elements on the page, including ones that are
unrelated to Bootstrap.
……
A possible easy workaround is to
override the Bootstrap CSS, apply content-box box model to all
elements on the page and use a border-box box model only to selected
Bootstrap elements, which need it (these are all .col-… classes,
.row, .container and .container-fluid). You can add the following CSS
rules after the Bootstrap and Kendo UI stylesheets.

参考样本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

相关文章
相关标签/搜索