1

我有一个 Kendo Tabstrip，我正在尝试使用 Bootstrap 格式化它的内容。但是 Tabstrip 的边框 ,k-content k-state-active呈现在顶部，而我的元素在外面。如果我不使用 Bootstrap，一切都会好起来的。我已经阅读了这个问题，但它并没有解决我的问题。

这是我的代码：

<div>
    @(Html.Kendo().TabStrip()
    .Name("tabstrip")
    .Items(items =>
    {
   //removed 
        items.Add()
            .Text("اطلاعات حساب‌ها")
            .Content(@<text>

    <div class="form-group form-inline col-xs-12">
        <div class="col-xs-5">
            @Html.LabelFor(x => x.LiCode1, new { @class = "control-label col-xs-3" })
            @Html.TextBoxFor(x => x.LiCode1, new { @class = "form-control  input-sm" })
        </div>
        <div class="col-xs-5">
            @Html.LabelFor(x => x.LiCode2, new { @class = "control-label col-xs-3" })
            @Html.TextBoxFor(x => x.LiCode2, new { @class = "form-control  input-sm" })
        </div>
    </div>
            </text>);
    })
    )
</div>

看来我根本不能使用col-*类，那么我应该如何格式化元素呢？

边框是指下图中的绿线，如果我删除col-*它，它将包含元素。

Kendo Tabstrip中的破坏格式

4

1 回答 1

1

如果您使用的是 Bootstrap 网格系统，则需要添加容器

从他们的文档中

容器

Bootstrap 需要一个包含元素来包装网站内容并容纳我们的网格系统。您可以选择两个容器之一在您的项目中使用。

有类.container，.container-fluid因此您需要使用这些类之一来包装 TabStrip 的内容。

items.Add()
            .Text("اطلاعات حساب‌ها")
            .Content(@<text>
<div class="container-fluid">
    <div class="form-group form-inline col-xs-12">
        <div class="col-xs-5">
            @Html.LabelFor(x => x.LiCode1, new { @class = "control-label col-xs-3" })
            @Html.TextBoxFor(x => x.LiCode1, new { @class = "form-control  input-sm" })
        </div>
        <div class="col-xs-5">
            @Html.LabelFor(x => x.LiCode2, new { @class = "control-label col-xs-3" })
            @Html.TextBoxFor(x => x.LiCode2, new { @class = "form-control  input-sm" })
        </div>
    </div>
</div>
于 2015-05-24T05:52:42.723 回答