ブートストラップカラムを含むタブストリップ

Question

私は剣道タブストリップを持っており、タブストリップアイテムの中にcol-md-6クラスを並べて2つのdivを配置しようとしています。 2つの列を持つ代わりに、それらは互いの上に積み重なります。いずれかをcol-md-5以下に変更すると、正しく動作します。誰もがこの問題を抱え、犯人を見つけましたか？

Answer 1

これは修正よりもハック「」がもっとあるかもしれないが、これは、我々はクラスを作成し、それを中心に

を得た方法で、それは剣道タブストリップのために次に

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

をboxFix呼び出すことができます

<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と同じ問題が発生しました。しかし、私はすでにタブコンテンツdivにk-コンテンツクラスを配置しているTelerik MVCラッパーを使用しています。したがって、新しいクラスを作成するのではなく、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遅れて申し訳ありません