Bootstrap Kendo TabStrip 内的网格
Bootstrap Grid within Kendo TabStrip
我想使用 Bootstrap 网格系统来组织 Teleriks KendoUi TabStrip 内容。前2行使用10个列单元,第三行有两个元素,每5个列单元。
在前两行中,似乎两个 x 5 单位列加起来不等于 10 个单位的宽度。它在 TabStrip 之外工作。
问题是:如何解决行为差异?
这是一个示例:http://jsbin.com/xiherudoji/edit?html,output
可能是因为 col-sm-5 有 padding-left 和 padding-right。如果您删除第三个的 padding-right 和第四个的 padding left,您会看到两者在第一个和第二个下方完美对齐。
原因在于box-sizing样式,Bootstrap要求是border-box,kendocss设置为content-box。覆盖 TabStrip 内容中所有元素的样式 div 修复了 Bootstrap 的问题并且对 TabStrip 没有负面影响。
我想使用 Bootstrap 网格系统来组织 Teleriks KendoUi TabStrip 内容。前2行使用10个列单元,第三行有两个元素,每5个列单元。 在前两行中,似乎两个 x 5 单位列加起来不等于 10 个单位的宽度。它在 TabStrip 之外工作。 问题是:如何解决行为差异? 这是一个示例:http://jsbin.com/xiherudoji/edit?html,output
可能是因为 col-sm-5 有 padding-left 和 padding-right。如果您删除第三个的 padding-right 和第四个的 padding left,您会看到两者在第一个和第二个下方完美对齐。
原因在于box-sizing样式,Bootstrap要求是border-box,kendocss设置为content-box。覆盖 TabStrip 内容中所有元素的样式 div 修复了 Bootstrap 的问题并且对 TabStrip 没有负面影响。