css - Bootstrap Grid within Kendo TabStrip

Question

I want to use the Bootstrap Grid system to organise within Teleriks KendoUi TabStrip content. The first 2 rows shall use 10 column units, the third row has two elements with each 5 column units. It seems two x 5 unit columns don't add up to the width of 10 units in the first two rows. It's working outside of TabStrip. The Questions is: How do I fix the difference in behaviour? Here is a sample: http://jsbin.com/xiherudoji/edit?html,output

Answer 1

原因在于box-sizing样式，Bootstrap要求是border-box，剑道css设置为content-box。覆盖 TabStrip 内容 div 中所有元素的样式修复了 Bootstrap 的问题，并且对 TabStrip 没有负面影响。

Answer 2

可能是因为 col-sm-5 有它们的 padding-left 和 padding-right。如果删除第三个的 padding-right 和第四个的 padding left，您会看到两者在第一个和第二个下方完全对齐。