Question

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

与bootstrap集成时，网格列未正确对齐。

我发现bootstrap使用以下代码

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

扰乱了剑道ui网格的布局。

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

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

以下是我的小提琴

http://jsfiddle.net/W4KLp/

我们可以在布局中看到生日和年龄栏（线）对齐受到干扰。

Answer 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小部件和所有孩子。所以现在如果你嵌套任何与Bootndo相关的内容，剑道相关的你将得到错误的盒子模型。这真是一团糟。

我尝试过一系列不同的黑客试图减轻这种情况，但事实上并没有好办法解决这个问题。这是我发现到目前为止效果最好的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;
    }
}

然后在任何可能嵌套在Kendo小部件内的元素上设置class='border-box'，你知道它将具有Bootstrap内容。

Answer 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>

与bootstrap css框架集成时，kendo ui grid无法正常显示

2 个答案: