与引导css框架集成时，剑道ui网格未正确显示

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

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

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

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

这会干扰剑道ui网格的布局

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

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

下面是我的小提琴

---

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

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

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

//剑道ui网格mvvm
.货柜*，
.容器*：之后，
.容器*：在
{
-webkit框大小：内容框！重要；
框大小：内容框！重要
}

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

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

//剑道ui网格mvvm
.货柜*，
.容器*：之后，
.容器*：在
{
-webkit框大小：内容框！重要；
框大小：内容框！重要
}

这肯定与Bootstrap和剑道依赖于不同的盒子模型有关，并且使依赖于

盒子大小：边框盒子的元素与依赖于
盒子大小：内容盒的元素混合的困难有关

通常，剑道的所有样式都基于标准的
内容框
模型。但是，引导的所有样式都依赖于易于使用的
边框框
模型。两者最大的区别在于如何处理填充、边框等。在
内容框中
它们是元素宽度的一部分，而在
边框框中
它们不是

Bootstrap假设您当然想使用
边框框
，为什么不呢！它有助于将页面上的所有内容设置为使用
边框框
，包括剑道小部件。对于剑道来说，它知道引导程序可能会将所有东西都设置为使用
边框框
，因此它会将剑道小部件及其所有子部件的所有东西都设置回
内容框
。所以现在如果你把任何与引导相关的东西嵌套在任何与剑道相关的东西里面，你会得到错误的盒子模型。一团糟

我已经尝试了一系列不同的方法来缓解这个问题，但事实是没有好的方法来解决它。这是到目前为止我发现最有效的CSS代码（它使用CSS属性选择器，因此对于较旧的浏览器来说是不可行的）：

然后，您可以在任何可能嵌套在剑道小部件中的元素上设置
class='border-box'
，您知道这些元素将包含引导内容。
这肯定与引导和剑道依赖于不同的框模型以及使依赖于
框大小：border-box
混合的元素困难有关对于那些依赖于
框大小调整：内容框

通常，剑道的所有样式都基于标准的
内容框
模型。但是，引导的所有样式都依赖于易于使用的
边框框
模型。两者最大的区别在于如何处理填充、边框等。在
内容框中
它们是元素宽度的一部分，而在
边框框中
它们不是

Bootstrap假设您当然想使用
边框框
，为什么不呢！它有助于将页面上的所有内容设置为使用
边框框
，包括剑道小部件。对于剑道来说，它知道引导程序可能会将所有东西都设置为使用
边框框
，因此它会将剑道小部件及其所有子部件的所有东西都设置回
内容框
。所以现在如果你把任何与引导相关的东西嵌套在任何与剑道相关的东西里面，你会得到错误的盒子模型。一团糟

我已经尝试了一系列不同的方法来缓解这个问题，但事实是没有好的方法来解决它。这是到目前为止我发现最有效的CSS代码（它使用CSS属性选择器，因此对于较旧的浏览器来说是不可行的）：

然后在任何可能嵌套在剑道小部件中的元素上设置
class='border-box'
，您知道这些元素将包含引导内容