Kendo Tabstrip内的Bootstrap列 [英] Bootstrap columns inside Kendo Tabstrip

问题描述

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

I have a Kendo Tabstrip and I'm trying to format its content using Bootstrap. But Tabstrip's border, k-content k-state-active, is rendered at top and my elements are outside. If I don't use Bootstrap, everything will be fine. I have already read this question and it doesn't solve my problem.

这是我的代码:

<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-*类，那么我应该如何格式化元素?

It seems I can't use col-* class at all, so how should I format the elements?

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

By border I mean the green line in below picture, if I remove the col-* it will contain elements.

推荐答案

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

You need to add container if you are using Bootstrap grid system

从他们的文档中

容器

引导程序需要包含元素来包装站点内容并容纳我们的网格系统.您可以选择两个之一 您的项目中使用的容器.

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.

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

There are class .container and .container-fluid, therefore you need to wrap your TabStrip's content using one of these 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>

这篇关于Kendo Tabstrip内的Bootstrap列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！