Kendo Tabstrip中的Bootstrap列

Question

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

这是我的代码：

<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-*它将包含元素。

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