Question

我有一个通用的剑道窗口，我称之为不同的局部视图。我不能使用bootstrap来设置内容的样式，因为它会在不同的浏览器中导致不同的布局，并且元素总是混乱。

这是一个示例：

<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">&nbsp;</div>
<div class="clearfix">&nbsp;</div>
@(Html.Kendo().Grid<Class...>()
....

并且行：

.line{
    line-height: 20px;
}

我错过了什么吗？我只想要一个2列的布局。你能给我一个例子吗？

Answer 1

我不知道为什么，但我应该使用col-xs-5。另外，要将元素保留在tab strip内，我必须将它们放在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>

<强>更新我在their documents找到了解决方案。

首先，您需要添加以下参考文献。

<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">

然后将以下CSS添加到您的site.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;
}

一切正常，您应该可以使用以下内容：

<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>

Answer 2

你可能需要这样的东西。根据您的标签播放列宽。

<div class="form-group form-inline">
    <div class="col-xs-6">
        @Html.LabelFor(m => m.2, new { @class = "control-label" })
    </div>
    <div class="col-xs-6">
        @Html.DisplayFor(m => m.2)
    </div>
</div>
<div class="form-group form-inline">
    <div class="col-xs-6">
        @Html.LabelFor(m => m.3, new { @class = "control-label" })
    </div>
    <div class="col-xs-6">
        @Html.DisplayFor(m => m.3)
    </div>
</div>
<div class="form-group form-inline">
    <div class="col-xs-6">
        @Html.LabelFor(m => m.4, new { @class = "control-label" })
    </div>
    <div class="col-xs-6">
        @Html.DisplayFor(m => m.4)
    </div>
</div>
<div class="form-group form-inline">
    <div class="col-xs-6">
        @Html.LabelFor(m => m.5, new { @class = "control-label" })
    </div>
    <div class="col-xs-6">
        @Html.DisplayFor(m => m.5)
    </div>
</div>

使用Bootstrap为Kendo Window的内容设置样式

2 个答案: