Kendo Modal 窗口和引导列问题答案

【问题标题】：Kendo Modal window & bootstrap column issuesKendo Modal 窗口和引导列问题
【发布时间】：2016-06-09 08:12:21
【问题描述】：

我正在使用 Kendo Modal 窗口和 bootstarp。我有剑道窗口，必须用列拆分两个 div。对于响应式设计，我必须使用引导类，如 row 和 col-md-12。

HTML：

<body>
  <button onclick='myFunction()'>Open Window</button>
  <div id="win1">
    <div class="row">
      <div class="col-md-6"  style="border:1px solid Red;">
        First
      </div>
      <div class="col-md-6" style="border:1px solid Blue;">
        Second
      </div>
    </div>
  </div>
</body>

JS：

 <script>
    function myFunction() {

      $("#win1").show().kendoWindow({
        width: "300px",
        height: "200px",
        modal: true,
        title: "Window 1",
       });
    }
  </script>

我知道，Bootstarp 类行分为 12 个部分。因此，First 和 Second div 应该出现在第一行。为什么它显示在两行中。这是我的plunk

【问题讨论】：

这是一个 CSS box-sizing 问题。看到这个：stackoverflow.com/questions/31140070/…
如链接中所述，我已包含“kendo.common-bootstrap.min.css”和“kendo.bootstrap.min.css”。问题仍然存在。我还需要做什么来解决这个问题？
您错过了盒子尺寸问题。对于 kendoui 小部件中的任何引导元素，您需要将其设置为边框框：stackoverflow.com/questions/20979648/…

标签： html twitter-bootstrap kendo-ui modal-dialog

【解决方案1】：

如果你检查你不合格的元素，你会发现没有分配给它们的宽度。正如 Arjan Knol 所说，您确实使用了正确的类/结构，但加载失败。

尝试以另一种方式加载引导程序，以便它能够加载并且你应该得到想要的结果。

【讨论】：

【解决方案2】：

打开inspector可以看到有错误：

加载资源失败：net::ERR_BLOCKED_BY_CLIENT

这意味着 Bootstrap 未正确加载，并且用于创建列的 css 无法正常工作。您可以看到它缺少这些样式：

 widht:50%; float:left;

如果您手动应用它们，您会发现它有效。

【讨论】：

没有收到任何错误。为什么需要提供宽度 50% 应该由 bootstarp 处理
是的，我知道。但它不是由引导程序处理的，因此这意味着文件包含有问题。
Bootstarp css 未正确包含这就是为什么它显示错误？ Bootstrap href- maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css 正确打开了css
好吧，据我所知，这将是问题所在。如果您打开检查器并转到 col-md-6，您会看到它没有 widht:50%;和浮动：左； .
还有一件事为什么滚动条在底部。控件应正确放置在可用空间中

【解决方案3】：

我也遇到过这种情况。正如ezanker 指出的那样，这是一个盒子尺寸问题。所以我将这个类添加到我的全局 css 中：

.border-box, .border-box * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    [class^="k-"] {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }
}

然后如果我将内容放在剑道窗口、模板等中。我用那个类包装它：

<div class="border-box">
    ...form groups, controls, etc.
</div>

【讨论】：