请检查下面的完整示例，Bootstrap 在 Kendo-UI 之外工作得非常好，但 Kendo-UI 内的相同 html 片段破坏了 Bootstrap 列。我在下面添加了一个工作示例，该示例显示了实际情况。我不明白这个问题是什么。预先致谢，感谢您的帮助。
$(document).ready(function() {
$("#tabstrip").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
<!-- Bootstrap Script -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap and Kendo UI Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery Library v3.3.1 -->
<!-- Kendo v2016.1.226-->
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-bootstrap.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.bootstrap.min.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 bg-primary">Column-1</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 bg-danger">Column-2</div>
</div>
</div>
<div id="example">
<div class="demo-section k-content">
<div id="tabstrip">
<ul>
<li class="k-state-active">Paris</li>
<li>New York</li>
<li>London</li>
<li>Moscow</li>
</ul>
<div>
<!--***** Bootstrap in TAB-1 *****-->
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 bg-primary">Column-1</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 bg-danger">Column-2</div>
</div>
</div>
<!--***** END *****-->
<span class="rainy"> </span>
<div class="weather">
<h2>17<span>ºC</span></h2>
<p>Rainy weather in Paris.</p>
</div>
</div>
<div>
<span class="sunny"> </span>
<div class="weather">
<h2>29<span>ºC</span></h2>
<p>Sunny weather in New York.</p>
</div>
</div>
<div>
<span class="sunny"> </span>
<div class="weather">
<h2>21<span>ºC</span></h2>
<p>Sunny weather in London.</p>
</div>
</div>
<div>
<span class="cloudy"> </span>
<div class="weather">
<h2>16<span>ºC</span></h2>
<p>Cloudy weather in Moscow.</p>
</div>
</div>
</div>
</div>
<!--**********END*********-->
<style>
.sunny,
.cloudy,
.rainy {
display: block;
margin: 30px auto 10px;
width: 128px;
height: 128px;
background: url('../content/web/tabstrip/weather.png') transparent no-repeat 0 0;
}
.cloudy {
background-position: -128px 0;
}
.rainy {
background-position: -256px 0;
}
.weather {
margin: 0 auto 30px;
text-align: center;
}
#tabstrip h2 {
font-weight: lighter;
font-size: 5em;
line-height: 1;
padding: 0 0 0 30px;
margin: 0;
}
#tabstrip h2 span {
background: none;
padding-left: 5px;
font-size: .3em;
vertical-align: top;
}
#tabstrip p {
margin: 0;
padding: 0;
}
</style>
</div>
</body>
</html>最佳答案
************ Telerik 的官方文档 ********** https://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap#nest-widgets-and-bootstrap-grid-layout
Nest 小部件和 Bootstrap 网格布局
Kendo UI 使用默认的 content-box 框模型(box-sizing CSS 属性)，而 Bootstrap 使用非默认的 border-box 模型并将其应用于页面上的所有元素，包括与 Bootstrap 无关的元素。这破坏了 Kendo UI 小部件的布局，这些小部件放置在 Bootstrap 网格布局内，导致覆盖 Bootstrap CSS 并将内容框框模型重新应用到小部件。因此，放置在 Kendo UI 小部件内的 Bootstrap 网格布局将无法按预期工作。一般来说，两个产品的多层嵌套必然会破坏内部的嵌套，除非为每一层新的嵌套使用额外的 CSS 规则。
一个可能的简单解决方法是覆盖 Bootstrap CSS，将 content-box 框模型应用于页面上的所有元素，并仅对需要它的 Bootstrap 元素使用 border-box 框模型。这些都是 .col-... 类、.row、.container、.container-fluid 和 form-control。
您可以在 Bootstrap 和 Kendo UI 样式表后添加以下 CSS 规则。
/* reset everything to the default box model */
*, :before, :after
{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/* set a border-box model only to elements that need it */
.form-control, /* if this class is applied to a Kendo UI widget, its layout may change */
.container,
.container-fluid,
.row,
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
关于javascript - Bootstrap 列无法与 Kendo-UI 正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48562678/