Табличка с бутстрапом

У меня есть полоса Kendo, и я пытаюсь поместить два div с классом col-md-6 бок о бок внутри элемента tabstrip. Вместо двух столбцов они складываются друг на друга. Если я изменю любой из них на col-md-5 или меньше, они будут работать правильно. Кто-нибудь имел эту проблему и нашел виновника?

Ответы

Ответ 1

Это может быть скорее "взломать", чем исправить, но так мы обходились.

создать класс, назовем его boxFix

.boxFix *,
.boxFix *::before,
.boxFix *::after {
  -moz-box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
}

Затем для полосы вкладок кендо

<div id="tabstrip">
<ul>
    <li class="k-state-active">
        tab 1
    </li>
    <li>
        tab 2
    </li>
    <li>
        tab 3
    </li>
        Sydney
    </li>
</ul>
<div>
    <div class="boxFix">
    <!--bootstrap grids work again-->
    </div>                        
</div>
<div>
    <div class="boxFix">
    <!--bootstrap grids work again-->
    </div>                        
</div>
<div>
    <div class="boxFix">
    <!--bootstrap grids work again-->
    </div>                        
</div>

Как я уже сказал, это скорее хак... но я надеюсь, что это поможет.

Ответ 2

Я столкнулся с той же проблемой, что и OP; однако я использую обертки Telerik MVC, которые уже размещают класс k-контента в содержимом div div. Поэтому я внедрил предложение Josh, повторно используя классы Telerik/Bootstrap вместо создания нового класса.

.k-content > .row > *,
.k-content > .row > *::before,
.k-content > .row > *::after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}