Bootstrap 3 网格系统在 3rd 方样式的 div (Kendo) 中无法正常工作 [英] Bootstrap 3 grid system does not work correctly within a 3rd party styled div (Kendo)

问题描述

查看问题演示:

<块引用>

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

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 网格系统在 3rd 方样式的 div (Kendo) 中无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！