Question

我有一个Kendo标签，我试图在tabtrip项目中并排放置col-md-6类的两个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;
}

然后是剑道标签条

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

Answer 3

我遇到了同样的问题，并使用http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap#nest-widgets-and-bootstrap-grid-layout

解决了这个问题

这是一份工作样本 http://dojo.telerik.com/@Xavier/iYAW/2

包含引导列的Tabstrip

3 个答案: