Boostrap 列在 Kendo-UI 中无法正常工作
[英]Boostrap columns are not working properly with Kendo-UI
问题描述
请查看下面的完整示例，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>
1 个解决方案
解决方案1
3 2018-02-02 11:44:47
*********** Telerik 的官方文档 ************ https://docs.telerik.com/kendo-ui/third-party/using-kendo-with- twitter-bootstrap#nest-widgets-and-bootstrap-grid-layout
嵌套小部件和 Bootstrap 网格布局
Kendo UI 使用默认的 content-box 框模型（box-sizing CSS 属性），而 Bootstrap 使用非默认的 border-box 模型并将其应用于页面上的所有元素，包括与 Bootstrap 无关的元素。 这破坏了放置在 Bootstrap 网格布局内的 Kendo UI 小部件的布局，导致覆盖 Bootstrap CSS 并将内容框框模型重新应用于小部件。 因此，放置在 Kendo UI 小部件内的 Bootstrap 网格布局不会按预期工作。 一般情况下，两种产品的多级嵌套必然会打破内部的嵌套，除非每个新的嵌套级别都使用额外的CSS规则。
一个可能的简单解决方法是覆盖 Bootstrap CSS，将内容框框模型应用于页面上的所有元素，并仅对需要它的 Bootstrap 元素使用边框框框模型。 这些都是 .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;
}
Kendo-UI数据源“包含”过滤器不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.