Bootstrap 列无法在 Kendo-UI 中正常工作答案

【问题标题】：Boostrap columns are not working properly with Kendo-UIBootstrap 列无法在 Kendo-UI 中正常工作
【发布时间】：2018-02-01 12:21:35
【问题描述】：

请检查下面的完整示例，Bootstrap 在 Kendo-UI 之外工作得非常好，但在 Kendo-UI 内相同的 html sn-p 正在破坏 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">&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>

【问题讨论】：

我使用了来自官方网站的演示：demos.telerik.com/kendo-ui/tabstrip/index 并使用了来自 www.w3schools.com 的引导模板
docs.telerik.com/kendo-ui/third-party/…
ezanker：感谢您的支持！~

标签： javascript jquery html twitter-bootstrap-3 kendo-ui

【解决方案1】：

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

嵌套小部件和引导网格布局

Kendo UI 使用默认的 content-box 框模型（box-sizing CSS 属性），而 Bootstrap 使用非默认的边框框模型并将其应用于页面上的所有元素，包括与 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;
}

【讨论】：

但是，我没有使用这个 sn-p 代码，它似乎使我所有的预览样式保持良好状态。我想如果你刚刚开始然后继续使用它。就我而言，我不能使用它，如果我这样做了，那么我必须在整个网站上修复很多样式。 /* 将所有内容重置为默认盒子模型 */ *, :before, :after { -webkit-box-sizing: content-box; -moz-box-sizing：内容框； box-sizing: 内容框； }