使用 Bootstrap 设计 Kendo Window 的内容
[英] Styling Kendo Window's content with Bootstrap
本文介绍了使用 Bootstrap 设计 Kendo Window 的内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个通用的 Kendo Window，我调用它来获取不同的局部视图.我无法使用 bootstrap 设置内容样式，因为它会导致不同浏览器中的布局不同，并且元素总是杂乱无章.
这是一个示例:
<div class="line"><div class="col-xs-6">@Html.LabelFor(m => m.2, new { @class = "col-xs-4 control-label" })@Html.DisplayFor(m => m.2)
<div class="col-xs-4">@Html.LabelFor(m => m.3, new { @class = "col-xs-4 control-label" })@Html.DisplayFor(m => m.3)
<div class="line"><div class="col-xs-6">@Html.LabelFor(m => m.4, new { @class = "col-xs-4 control-label" })@Html.DisplayFor(m => m.4)
<div class="col-xs-4">@Html.LabelFor(m => m.5, new { @class = "col-xs-4 control-label" })@Html.DisplayFor(m => m.5)
<div class="clearfix"> </div><div class="clearfix"> </div>@(Html.Kendo().Grid()....和线:
.line{行高:20px；}我错过了什么吗?我只想有一个 2 列的布局.可以举个例子吗?
解决方案
我不知道为什么，但我应该使用 col-xs-5.另外，为了将元素保存在 tab strip 中，我必须将它们放在 container 中.
<div class="form-group form-inline col-xs-12"><div class="col-xs-5"></div><div class="col-xs-5"></div>
<div class="form-group form-inline col-xs-12"><div class="col-xs-5"></div><div class="col-xs-5"></div>
......
更新 我在他们的文档 中找到了解决方案.
首先需要添加以下引用.
然后将以下 CSS 添加到您的 site.css 并将其包含在页面中:
/* 将一切重置为默认的盒子模型 */*，:之前，:之后{-webkit-box-sizing: 内容框；-moz-box-sizing: 内容框；框大小:内容框；}/* 只为需要它的元素设置一个边框模型 */.form-control,/* 如果这个类应用于 Kendo UI 小部件，它的布局可能会改变 */.容器，.container-fluid,.排，.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: 边框框；-moz-box-sizing: 边框框；box-sizing: 边框框；}一切正常，您应该可以使用以下内容:
<div class="form-group form-inline col-xs-12"><div class="col-xs-6"></div><div class="col-xs-6"></div>
<div class="form-group form-inline col-xs-12"><div class="col-xs-6"></div><div class="col-xs-6"></div>
......
I have a generic Kendo Window that I call for different partial views. I can't style contents using bootstrap, as it causes different layouts in different browsers and elements are always cluttered.
This is a sample:
<div class="form-group form-inline">
<div class="line">
<div class="col-xs-6">
@Html.LabelFor(m => m.2, new { @class = "col-xs-4 control-label" })
@Html.DisplayFor(m => m.2)
</div>
<div class="col-xs-4">
@Html.LabelFor(m => m.3, new { @class = "col-xs-4 control-label" })
@Html.DisplayFor(m => m.3)
</div>
</div>
<div class="line">
<div class="col-xs-6">
@Html.LabelFor(m => m.4, new { @class = "col-xs-4 control-label" })
@Html.DisplayFor(m => m.4)
</div>
<div class="col-xs-4">
@Html.LabelFor(m => m.5, new { @class = "col-xs-4 control-label" })
@Html.DisplayFor(m => m.5)
</div>
</div>
</div>
<div class="clearfix"> </div>
<div class="clearfix"> </div>
@(Html.Kendo().Grid<Class...>()
....
And line:
.line{
line-height: 20px;
}
Am I missing something? I just want to have a 2-column layout. Can you give me an example please?
解决方案
I don't know why, but I should use col-xs-5. Also, to keep elements inside a tab strip I have to put them inside a container.
<div class="container-fluid">
<div class="form-group form-inline col-xs-12">
<div class="col-xs-5"></div>
<div class="col-xs-5"></div>
</div>
<div class="form-group form-inline col-xs-12">
<div class="col-xs-5"></div>
<div class="col-xs-5"></div>
</div>
......
</div>
UPDATE
I found the solution at their documents .
First you need to add the following references.
<link rel="stylesheet" href="http://cdn.kendostatic.com/VERSION/styles/kendo.common-bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/VERSION/styles/kendo.bootstrap.min.css">
And then add the following CSS to your site.css and include it in the page:
/* 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;
}
And everything works fine, you should be able to use the following:
<div class="container-fluid">
<div class="form-group form-inline col-xs-12">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
<div class="form-group form-inline col-xs-12">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
......
</div>
这篇关于使用 Bootstrap 设计 Kendo Window 的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
