问题描述
查看问题演示:
Kendo UI 使用默认的 content-box 框模型(box-sizing CSS 属性)，而 Bootstrap 使用非默认的 bordex-box 模型并将其应用于页面上的所有元素，包括与 Bootstrap 无关的元素.这打破了放置在 Bootstrap 网格布局内的 Kendo UI 小部件的布局，迫使我们覆盖 Bootstrap CSS 并将内容框框模型重新应用于 Kendo UI 小部件.因此，放置在 Kendo UI 小部件内的 Bootstrap 网格布局将无法按预期工作.一般来说，两种产品的多级嵌套必然会打破内部的一层，除非每层新的嵌套都使用额外的CSS规则.
See issue demonstration: full issue demonstration and sandbox
I would like to use Bootstrap 3 grid system within a <div> element. This <div> element is a Kendo datagrid toolbar which is a full page width <div> element. I do not think the solution is Kendo specific or requires Kendo skills, so please keep reading.
Unfortunately the Kendo CSS applies some style on this <div> element which somehow fools bootstrap 3 grid system width calculation. As a result if I try to use col 12 units within this <div> element it always breaks down to 2 rows. For example col-6 and a col-6 breaks. A col-6 and a col-4 fits to one row.
I can not figure out what causes the problem, and how to prevent it.
See here for an explanation of the issue and a possible workaround:
http://docs.telerik.com/kendo-ui/using-kendo-with-twitter-bootstrap
这篇关于Bootstrap 3 网格系统在 3rd 方样式的 div (Kendo) 中无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！