1

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

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

我发现引导程序使用以下代码

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

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

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

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

下面是我的小提琴

http://jsfiddle.net/W4KLp/

正如我们在布局中看到的那样，生日和年龄列（行）对齐受到干扰。

4

2 回答 2

3

这肯定与 Bootstrap 和 Kendo 依赖于不同的盒子模型的事实以及制作依赖于的元素与依赖于的元素box-sizing: border-box混合的困难有关box-sizing: content-box。

一般来说，剑道的所有造型都是基于标准content-box模型。但是，Bootstrap 的所有样式都依赖于更易于使用的border-box模型。两者最大的区别在于如何处理填充、边框等。content-box它们是元素宽度的一部分，但border-box它们不是。

Bootstrap 假设您当然想使用border-box，为什么不呢！它有助于将页面上的所有内容设置为使用border-box，包括 Kendo 小部件。就其本身而言，Kendo 知道 Bootstrap 可能会将所有内容设置为使用border-box，因此它将所有内容设置回content-boxKendo 小部件及其所有子项。所以现在如果你在任何与剑道相关的东西中嵌套任何与 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'任何可能嵌套在您知道将具有 Bootstrap 内容的 Kendo 小部件内的元素。

于 2014-06-27T18:15:20.930 回答
1

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

<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>
于 2013-11-25T15:35:42.147 回答