Bootstrap 3网格系统在第三方风格的div（Kendo）中不能正常工作 [英] Bootstrap 3 grid system does not work correctly within a 3rd party styled div (Kendo)
问题描述
请参阅问题演示：
Kendo UI使用默认内容框模型（box-sizing CSS属性），而Bootstrap使用非-default bordex-box模型，并将其应用于页面上的所有元素，包括与Bootstrap无关的元素。这会中断Kendo UI窗口小部件的布局，这些窗口小部件位于Bootstrap网格布局内，强制我们覆盖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
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.
这篇关于Bootstrap 3网格系统在第三方风格的div（Kendo）中不能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
