查看问题演示：完整问题演示和沙盒

我想在 元素中使用 Bootstrap 3 网格系统。这个 元素是一个剑道数据网格工具栏，它是一个全页宽度的 元素。我不认为解决方案是特定于剑道或需要剑道技能的，所以请继续阅读。

不幸的是，Kendo CSS 在这个 元素上应用了一些样式，这以某种方式欺骗了 bootstrap 3 网格系统宽度计算。因此，如果我尝试在此 元素中使用 col 12 单位，它总是分解为 2 行。例如 col-6 和 col-6 中断。 col-6 和 col-4 适合一行。

我不知道是什么导致了问题，以及如何预防。

http://docs.telerik.com/kendo-ui/using-kendo-with-twitter-bootstrap

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. This breaks the layout of the Kendo UI widgets, which are placed inside a Bootstrap grid layout, forcing us to override the Bootstrap CSS and reapply the content-box box model to Kendo UI widgets. As a result, a Bootstrap grid layout placed inside a Kendo UI widget will not work as expected. In general, multiple level nesting of the two products is bound to break the one that is on the inside, unless an additional CSS rule is used for each new level of nesting.