Bootstrap columns inside Kendo Tabstrip

问题

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.

This is my code:

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

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

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

回答1:

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

from their documentation

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.

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>

来源：https://stackoverflow.com/questions/30419623/bootstrap-columns-inside-kendo-tabstrip