Question

请查看下面的完整示例，Bootstrap在Kendo-UI之外工作正常，但Kendo-UI中的相同html代码段正在打破Bootstrap Columns。我在下面添加了一个工作示例，其中显示了该实例。我不明白什么是这个问题。在此先感谢，感谢您的帮助。

$(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">&nbsp;</span>
          <div class="weather">
            <h2>17<span>&ordm;C</span></h2>
            <p>Rainy weather in Paris.</p>
          </div>
        </div>
        <div>
          <span class="sunny">&nbsp;</span>
          <div class="weather">
            <h2>29<span>&ordm;C</span></h2>
            <p>Sunny weather in New York.</p>
          </div>
        </div>
        <div>
          <span class="sunny">&nbsp;</span>
          <div class="weather">
            <h2>21<span>&ordm;C</span></h2>
            <p>Sunny weather in London.</p>
          </div>
        </div>
        <div>
          <span class="cloudy">&nbsp;</span>
          <div class="weather">
            <h2>16<span>&ordm;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>

Answer 1

*********** Telerik的官方文件*********** https://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap#nest-widgets-and-bootstrap-grid-layout

嵌套窗口小部件和引导程序网格布局

Kendo UI使用默认的内容框模型（box-sizing CSS属性），而Bootstrap使用非默认的border-box模型并将其应用于页面上的所有元素，包括与Bootstrap无关的元素。这打破了Kendo UI小部件的布局，这些小部件放置在Bootstrap网格布局中，导致覆盖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;
}

Boostrap列与Kendo-UI无法正常工作

1 个答案: