Бутстрап-колонны внутри Kendo Tabstrip

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-* класс вообще, так как я должен форматировать элементы?

По границе Я имею в виду зеленую линию внизу изображения, если я удалю 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>