Bootstrap 列在 Kendo 选项卡中

Question

我有一个 Kendo 标签条，我正在尝试使用 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-* class，那我应该怎么格式化元素呢？

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

Answer 1

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

来自他们的文档

Containers

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects.

有 class .container 和 .container-fluid，因此您需要使用其中之一包装 TabStrip 的内容 class.

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>

Bootstrap 列在 Kendo 选项卡中

Bootstrap columns inside Kendo Tabstrip

twitter-bootstrap

kendo-ui

kendo-asp.net-mvc

kendo-tabstrip