twitter-bootstrap – Kendo UI Bootstrap主题与Bootstrap 3.1.0

发布时间：2020-12-18 00:18:32 所属栏目：安全来源：网络整理

导读：我正在将基于Bootstrap 2.3的站点转换为3.1,并且我有很多Kendo的Bootstrap主题的问题. 我倾向于在自定义网格弹出式编辑器中使用Bootstrap表单组,但它们不符合Kendo的CSS. 我设置了一个Fiddle来显示问题.正如您可以在编辑记录时看到的那样,标签的大小和位置以

我正在将基于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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!