包含引导栏的Tabstrip [英] Tabstrip containing bootstrap columns

问题描述

我有一个Kendo制表符，并且我试图将两个col-md-6类的div并排放置在一个制表符项中.它们没有2列，而是彼此堆叠.如果我将它们中的任何一个更改为col-md-5或更小，它们都可以正常工作.有没有人遇到这个问题并找到了罪魁祸首?

I have a Kendo tabstrip and I'm trying to put two divs with the col-md-6 class side by side inside a tabstrip item. Instead of having 2 columns, they stack on top of each other. If I change any of them to col-md-5 or smaller, they work correctly. Has anyone had this problem and found the culprit?

推荐答案

这可能更像是一种"hack"，而不是解决方案，但这就是我们所采用的解决方法

This might be more of a 'hack' than a fix, but this is how we got around it

创建一个类，将其命名为boxFix

create a class, lets call it 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>

就像我说的那样，这可能更像是一种骇客……但我希望它能有所帮助.

Like I said this is probably more of a hack... but I hope it helps.

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