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

前端之家收集整理的这篇文章主要介绍了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

原文链接:https://www.f2er.com/bootstrap/234035.html

猜你在找的Bootstrap相关文章