标签栏包含自举列

Question

我有一个剑道标签栏，我试图把两个div与col-md-6类并排标签栏的项目里面。而不是有2列，他们堆叠在一起。如果我将它们中的任何一个更改为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