与 bootstrap css 框架集成时，kendo ui 网格无法正确显示答案

【问题标题】：kendo ui grid not displaying properly when integrated with bootstrap css framework与 bootstrap css 框架集成时，kendo ui 网格无法正确显示
【发布时间】：2013-10-24 14:24:32
【问题描述】：

我想知道如何在与 bootstrap css 框架集成时显示剑道 ui 网格。

与引导程序集成时，网格列未正确对齐。

我发现bootstrap使用如下代码

*,*:before,*:after {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
  }

这会扰乱剑道 ui 网格的布局。

我需要在我的项目中使用引导 css 框架。这是强制性的。

我知道删除这个 css 会给我的输出。我想知道是否有任何其他解决方案来实现我所需的输出。如果存在该解决方案，那么它是什么？

下面是我的小提琴

http://jsfiddle.net/W4KLp/

正如我们在布局中看到的那样，生日和年龄列（行）对齐被打乱了。

【问题讨论】：

标签： css kendo-grid twitter-bootstrap-3

【解决方案1】：

这肯定与 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 小部件和所有它们的孩子。所以现在如果你在任何与剑道相关的东西中嵌套任何与 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 小部件内的元素上。

【讨论】：

【解决方案2】：

我有同样的问题，我的快速解决方案是为父容器添加一些规范化类。例如：

<div class="container">
     // kendo ui grid mvvm
     <div data-role="grid">
     </div>
</div>

<style>
.container *,
.container *:after,
.container *:before
{
    -webkit-box-sizing : content-box !important;
    box-sizing : content-box !important
}
</style>

【讨论】：