包含引导列的Tabstrip

Question

我有一个Kendo标签,我试图col-md-6在tabtrip项目中并排放置两个div .它们不是有两列,而是堆叠在一起.如果我将它们中的任何一个更改为col-md-5或更小,它们都能正常工作.有谁有这个问题,并找到了罪魁祸首？

Answer 1

这可能更像是一个"黑客",而不是修复,但这就是我们如何解决它

创建一个类,让我们称之为boxFix

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

然后为kendo标签条

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

就像我说这可能更像是一个黑客......但我希望它有所帮助.

Answer 2

我遇到了和OP一样的问题; 但是,我正在使用Telerik MVC包装器,它已经在选项卡内容div上放置了k-content类.因此,我通过重用Telerik/Bootstrap类而不是创建新类来实现Josh的建议.

.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;
}