twitter-bootstrap Kendo UI Bootstrap 主题无法与 Bootstrap 3.1.0 配合使用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21625780/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Kendo UI Bootstrap theme not working well with Bootstrap 3.1.0
提问by Mat
I'm just in the process of converting a site based on Bootstrap 2.3 to 3.1 and I've got lots of issues with Kendo's Bootstrap theme.
我刚刚将基于 Bootstrap 2.3 的站点转换为 3.1，我在 Kendo 的 Bootstrap 主题方面遇到了很多问题。
I tend to use use Bootstrap form-groups within custom Grid popup editors, but they don't behave with Kendo's CSS.
我倾向于在自定义网格弹出编辑器中使用 Bootstrap 表单组，但它们与 Kendo 的 CSS 不兼容。
I've setup a Fiddleto show the problem. As you can see when you edit a record, the sizing and positioning of the labels and input and way out.
我已经设置了一个Fiddle来显示问题。正如您在编辑记录时所看到的，标签的大小和位置以及输入和输出。
It's something to do with the last two entries in the common-template.lessfile:
这与common-template.less文件中的最后两个条目有关：
.k-animation-container,
.k-widget,
.k-widget *,
.k-animation-container *,
.k-widget *:before,
.k-animation-container *:after
{
.box-sizing(content-box);
}
.k-button,
.k-textbox,
.k-autocomplete,
div.k-window-content,
.k-tabstrip > .k-content > .km-scroll-container,
.k-block,
.k-edit-cell .k-widget,
.k-grid-edit-row .k-widget,
.k-grid-edit-row .text-box,
.km-actionsheet > li,
.km-shim
{
.box-sizing(border-box);
}
If you remove these the Bootstrap forms look correct, but certain Kendo elements (such as the pager) are adversely affected.
如果您删除这些 Bootstrap 表单看起来是正确的，但某些 Kendo 元素（例如寻呼机）会受到不利影响。
Is there a way around this or is this not how Telerik intend for its framework to be used?
有没有办法解决这个问题，或者这不是 Telerik 打算如何使用它的框架？
回答by John Washam
I ended up using the below CSS styles to get Bootstrap elements to look right inside of Kendo elements. We especially had problems getting .row(and column classes) to work inside Kendo Windows, but this CSS fixed our issues.
我最终使用了下面的 CSS 样式来让 Bootstrap 元素在 Kendo 元素的内部进行查看。我们尤其在获取.row（和列类）在 Kendo Windows 中工作时遇到了问题，但是这个 CSS 解决了我们的问题。
.k-widget select, .k-widget textarea, .k-widget input[type="text"]:not(.k-input), .k-widget input[type="password"], .k-widget input[type="datetime"], .k-widget input[type="datetime-local"], .k-widget input[type="date"], .k-widget input[type="month"], .k-widget input[type="time"], .k-widget input[type="week"], .k-widget input[type="number"], .k-widget input[type="email"], .k-widget input[type="url"], .k-widget input[type="search"], .k-widget input[type="tel"], .k-widget input[type="color"], .k-widget .uneditable-input {
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
.k-window .row, .k-window .row *:not(.k-widget):not(.k-animation-container), .k-widget .row *:before:not(.k-widget) { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.k-widget .col-lg-1, .k-widget .col-lg-2, .k-widget .col-lg-3, .k-widget .col-lg-4, .k-widget .col-lg-5, .k-widget .col-lg-6, .k-widget .col-lg-7, .k-widget .col-lg-8, .k-widget .col-lg-9, .k-widget .col-lg-10, .k-widget .col-lg-11, .k-widget .col-lg-12, .k-widget .col-md-1, .k-widget .col-md-2, .k-widget .col-md-3, .k-widget .col-md-4, .k-widget .col-md-5, .k-widget .col-md-6, .k-widget .col-md-7, .k-widget .col-md-8, .k-widget .col-md-9, .k-widget .col-md-10, .k-widget .col-md-11, .k-widget .col-md-12, .k-widget .col-sm-1, .k-widget .col-sm-2, .k-widget .col-sm-3, .k-widget .col-sm-4, .k-widget .col-sm-5, .k-widget .col-sm-6, .k-widget .col-sm-7, .k-widget .col-sm-8, .k-widget .col-sm-9, .k-widget .col-sm-10, .k-widget .col-sm-11, .k-widget .col-sm-12, .k-widget .col-xs-1, .k-widget .col-xs-2, .k-widget .col-xs-3, .k-widget .col-xs-4, .k-widget .col-xs-5, .k-widget .col-xs-6, .k-widget .col-xs-7, .k-widget .col-xs-8, .k-widget .col-xs-9, .k-widget .col-xs-10, .k-widget .col-xs-11, .k-widget .col-xs-12
{
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
回答by sham
From Kendo docs:
从剑道文档：
Kendo UI uses the default content-box box model (box-sizing CSS property), while Bootstrap uses the non-default bordex-box model and applies it to all elements on the page, including ones that are unrelated to Bootstrap. ...... A possible easy workaround is to override the Bootstrap CSS, apply content-box box model to all elements on the page and use a border-box box model only to selected Bootstrap elements, which need it (these are all .col-... classes, .row, .container and .container-fluid). You can add the following CSS rules after the Bootstrap and Kendo UI stylesheets.
Kendo UI 使用默认的 content-box 框模型（box-sizing CSS 属性），而 Bootstrap 使用非默认的 bordex-box 模型并将其应用于页面上的所有元素，包括与 Bootstrap 无关的元素。......一个可能的简单解决方法是覆盖Bootstrap CSS，将内容框框模型应用于页面上的所有元素，并仅对需要它的选定Bootstrap元素使用边框框框模型（这些都是.col-... 类、.row、.container 和 .container-fluid）。您可以在 Bootstrap 和 Kendo UI 样式表之后添加以下 CSS 规则。
See reference for sample css solution: http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/using-kendo-with-twitter-bootstrap#nesting-kendo-ui-widgets-and-bootstrap-grid-layout
请参阅示例 css 解决方案的参考：http: //docs.telerik.com/kendo-ui/getting-started/using-kendo-with/using-kendo-with-twitter-bootstrap#nesting-kendo-ui-widgets-and -bootstrap-grid-layout
回答by Dragouf
I solved this problem by adding those css lines... :
我通过添加这些 css 行解决了这个问题...：
.k-animation-container, .k-widget, .k-widget *, .k-animation-container *, .k-widget *:before, .k-animation-container *:after, .k-block .k-header, .k-list-container {
box-sizing: inherit;
}
.k-block > .k-header, .k-window-titlebar {
height:auto;
}
回答by daveaglick
This definitely has to do with the fact Bootstrap and Kendo rely on different box models and the difficulties in making elements that rely on box-sizing: border-boxintermix with those that rely on box-sizing: content-box.
这肯定与 Bootstrap 和 Kendo 依赖于不同的盒子模型的事实以及box-sizing: border-box将依赖于box-sizing: content-box.
In general, all the styling for Kendo is based on the standard content-boxmodel. However, all the styling for Bootstrap relies on the easier to use border-boxmodel. The biggest difference between the two is how padding, borders, etc. are treated. In content-boxthey're part of the width of an element, in border-boxthey're not.
一般来说，剑道的所有造型都是基于标准content-box模型。但是，Bootstrap 的所有样式都依赖于更易于使用的border-box模型。两者最大的区别在于如何处理padding、border等。在content-box他们的元素的宽度的一部分，border-box他们不是。
Bootstrap assumes that of course you want to use border-box, and why wouldn't you! It helpfully sets everything on the pageto use border-box, including the Kendo widgets. For it's part, Kendo knows that Bootstrap might set everything to use border-boxso it sets everything back to content-boxfor Kendo widgets and all their children. So now if you nest anything Bootstrap related inside anything Kendo related you'll get the wrong box model. It's a mess.
Bootstrap 假设您当然想使用border-box，为什么不呢！它有助于将页面上的所有内容设置为使用border-box，包括 Kendo 小部件。就其而言，Kendo 知道 Bootstrap 可能会将所有内容设置为使用，border-box因此它将所有内容都设置回content-boxKendo 小部件及其所有子项。所以现在如果你在任何与剑道相关的东西中嵌套任何与 Bootstrap 相关的东西，你就会得到错误的盒子模型。一团糟。
I've tried a bunch of different hacks to try and mitigate this, but the fact of the matter is there's no good way to resolve it. This is the CSS code that I have found works best so far (it uses a CSS attribute selector, so it's a no-go for older browsers):
我尝试了许多不同的黑客来尝试缓解这种情况，但事实是没有好的方法来解决它。这是迄今为止我发现效果最好的 CSS 代码（它使用 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;
}
}
Then you set class='border-box'on any element that might get nested inside of a Kendo widget that you know will have Bootstrap content.
然后您设置class='border-box'任何可能嵌套在您知道将具有 Bootstrap 内容的 Kendo 小部件内的元素。
