Bootstrap Columns在Kendo-UI中无法正常工作问题求助

我帮你分析下这个问题，其实主要有两个核心原因，咱们一步步来解决：

首先，先解决最明显的jQuery冲突问题 #

你同时引入了两个不同版本的jQuery（一个是Google CDN的2.1.1，另一个是Kendo CDN自带的版本），这会直接导致Bootstrap和Kendo的JS逻辑冲突，很多功能都会失效。

修复方法：只保留一个jQuery引用，建议保留Kendo自带的那个（因为Kendo对jQuery版本有特定兼容性要求），调整后的脚本引入顺序应该是这样：

<!-- 先引入Kendo自带的jQuery -->
<script src="http://kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
<!-- 然后引入Bootstrap的JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 最后引入Kendo UI的核心脚本（如果之前没加的话） -->
<script src="http://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>

然后，解决TabStrip隐藏内容的列宽计算问题 #

Kendo TabStrip默认会把非激活的标签页内容设置为display: none，而Bootstrap的栅格系统依赖元素的实际宽度来计算列布局，隐藏的元素没法正确计算宽度，所以columns就失效了。这里给你两个解决方案：

方案1：利用TabStrip的激活事件触发重绘 #

修改你的TabStrip初始化代码，在标签页切换激活时，手动触发窗口的resize事件——Bootstrap会监听这个事件来重新计算栅格列宽：

$(document).ready(function() {
  $("#tabstrip").kendoTabStrip({
    animation: {
      open: { effects: "fadeIn" }
    },
    // 当标签页激活时触发resize
    activate: function(e) {
      $(window).trigger("resize");
    }
  });
});

方案2：修改TabStrip的隐藏样式（应急备选） #

如果方案1效果不好，可以通过CSS修改Kendo TabStrip隐藏内容的方式，让非激活内容不是完全隐藏，而是移出可视区域但保留宽度计算：

.k-tabstrip-content > .k-content:not(.k-state-active) {
  display: block !important;
  visibility: hidden;
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.k-tabstrip-content > .k-content.k-state-active {
  visibility: visible;
  position: static;
}

额外提醒 #

别忘了确保Bootstrap的CSS也正确引入了，如果Kendo的CSS覆盖了Bootstrap样式，可以把Bootstrap的CSS放在Kendo CSS之后引入，或者用更具体的CSS选择器来保持Bootstrap样式的优先级。

内容的提问来源于stack exchange，提问作者Bmuzammil Spears